diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
36 files changed, 440 insertions, 579 deletions
diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 0183c43d5..0f02563b4 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss index fb2376abf..c7fc74b2a 100644 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ b/app/javascript/flavours/glitch/styles/accessibility.scss @@ -25,7 +25,7 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' content: '\F00C'; font-size: 50%; font-family: FontAwesome; - right: -0.55em; + inset-inline-end: -0.55em; top: -0.44em; } } diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index cee93e25b..b7a60ef36 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/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; @@ -139,21 +139,21 @@ .older { float: left; - padding-left: 0; + padding-inline-start: 0; .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } .newer { float: right; - padding-right: 0; + padding-inline-start: 0; .fa { display: inline-block; - margin-left: 5px; + margin-inline-start: 5px; } } diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 240c90735..58223143f 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/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; } } @@ -563,7 +568,10 @@ body, & > strong { display: block; - margin: 0 0 10px -5px; + margin-top: 0; + margin-bottom: 10px; + margin-inline-end: 0; + margin-inline-start: -5px; font-weight: 500; font-size: 14px; line-height: 18px; @@ -588,7 +596,7 @@ body, .activity-stream { flex: 2 0 0; - margin-right: 20px; + margin-inline-end: 20px; max-width: calc(100% - 60px); .entry { @@ -632,20 +640,23 @@ body, margin-bottom: 5px; #form_status_batch_action { - margin: 0 5px 5px 0; + margin-bottom: 5px; + margin-inline-end: 5px; font-size: 14px; } input.button { - margin: 0 5px 5px 0; + margin-bottom: 5px; + margin-inline-end: 5px; } .media-spoiler-toggle-buttons { - margin-left: auto; + margin-inline-start: auto; .button { overflow: visible; - margin: 0 0 5px 5px; + margin-bottom: 5px; + margin-inline-start: 5px; float: right; } } @@ -667,7 +678,7 @@ body, .special-action-button, .back-link { - text-align: right; + text-align: end; flex: 1 1 auto; } @@ -685,7 +696,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; @@ -712,7 +723,7 @@ body, &__avatar { position: absolute; - left: 15px; + inset-inline-start: 15px; top: 15px; .avatar { @@ -780,7 +791,7 @@ a.name-tag, .avatar { display: block; margin: 0; - margin-right: 5px; + margin-inline-end: 5px; border-radius: 50%; } @@ -794,7 +805,7 @@ a.name-tag, .speech-bubble { margin-bottom: 20px; - border-left: 4px solid $ui-highlight-color; + border-inline-start: 4px solid $ui-highlight-color; &.positive { border-left-color: $success-green; @@ -810,7 +821,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; @@ -824,7 +835,7 @@ a.name-tag, &__owner { padding: 8px; - padding-left: 12px; + padding-inline-start: 12px; } time { @@ -848,7 +859,7 @@ a.name-tag, border: 0; &__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } } @@ -857,7 +868,7 @@ a.name-tag, font-weight: 500; color: $darker-text-color; text-transform: uppercase; - text-align: right; + text-align: end; a { color: inherit; @@ -908,7 +919,7 @@ a.name-tag, &__icon { color: $dark-text-color; - margin-right: 4px; + margin-inline-end: 4px; font-weight: 500; } } @@ -1106,7 +1117,7 @@ a.name-tag, > h4 { position: sticky; - left: 0; + inset-inline-start: 0; } &__table { @@ -1118,7 +1129,7 @@ a.name-tag, &__date { white-space: nowrap; padding: 10px 0; - text-align: left; + text-align: start; min-width: 120px; &.retention__table__average { @@ -1176,7 +1187,7 @@ a.name-tag, &__total { display: block; - margin-right: 10px; + margin-inline-end: 10px; font-weight: 500; font-size: 28px; color: $primary-text-color; @@ -1278,7 +1289,7 @@ a.sparkline { } &__value { - text-align: right; + text-align: end; color: $darker-text-color; padding: 11px 10px; } @@ -1289,7 +1300,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} { @@ -1325,7 +1336,7 @@ a.sparkline { } &__rules { - margin-left: 30px; + margin-inline-start: 30px; } } @@ -1447,7 +1458,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; } @@ -1527,7 +1538,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 { @@ -1547,7 +1558,7 @@ a.sparkline { &__avatar { position: absolute; - left: 15px; + inset-inline-start: 15px; top: 15px; border-radius: 4px; width: 40px; @@ -1563,7 +1574,7 @@ a.sparkline { .username { color: $primary-text-color; font-weight: 500; - margin-right: 5px; + margin-inline-end: 5px; a { color: inherit; @@ -1578,7 +1589,7 @@ a.sparkline { } time { - margin-left: 5px; + margin-inline-start: 5px; vertical-align: baseline; } } @@ -1613,8 +1624,8 @@ a.sparkline { &__actions { position: absolute; top: 15px; - right: 15px; - text-align: right; + inset-inline-end: 15px; + text-align: end; } } } @@ -1637,7 +1648,7 @@ a.sparkline { flex: 0 0 auto; width: 200px; padding: 15px; - padding-right: 0; + padding-inline-end: 0; .button { display: block; @@ -1723,7 +1734,7 @@ a.sparkline { &__rules { list-style: disc; - padding-left: 15px; + padding-inline-start: 15px; margin-bottom: 20px; color: $darker-text-color; @@ -1812,7 +1823,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; @@ -1822,7 +1833,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; @@ -1841,7 +1852,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/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index 84977eb39..8ea3e7881 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -266,7 +266,7 @@ button { overflow: hidden; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: -1000; } diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index 6664a5756..705827473 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -5,7 +5,7 @@ &__preview { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; object-fit: cover; @@ -211,7 +211,7 @@ } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .account__relationship { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index b95cffbb4..374f46907 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -31,7 +31,7 @@ padding: 0; & > .account__avatar-wrapper { - margin: 0 8px 0 0; + margin-inline-end: 8px; } & > .display-name { @@ -57,8 +57,8 @@ .account__avatar-wrapper { float: left; - margin-left: 12px; - margin-right: 12px; + margin-inline-start: 12px; + margin-inline-end: 12px; } .account__avatar { @@ -74,7 +74,7 @@ &-inline { display: inline-block; vertical-align: middle; - margin-right: 5px; + margin-inline-end: 5px; } &-composite { @@ -95,7 +95,7 @@ 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; @@ -128,7 +128,7 @@ position: absolute; bottom: 0; - right: 0; + inset-inline-end: 0; z-index: 1; img { @@ -198,12 +198,12 @@ text-decoration: none; overflow: hidden; flex: 0 1 100%; - border-left: 1px solid lighten($ui-base-color, 8%); + border-inline-start: 1px solid lighten($ui-base-color, 8%); padding: 10px 0; border-bottom: 4px solid transparent; &:first-child { - border-left: 0; + border-inline-start: 0; } &.active { @@ -247,12 +247,12 @@ .account-authorize__avatar { float: left; - margin-right: 10px; + margin-inline-end: 10px; } .notification__report { padding: 8px 10px; - padding-left: 68px; + padding-inline-start: 68px; position: relative; border-bottom: 1px solid lighten($ui-base-color, 8%); min-height: 54px; @@ -272,14 +272,15 @@ &__avatar { position: absolute; - left: 10px; + inset-inline-start: 10px; top: 10px; } } .notification__message { - margin-left: 42px; - padding: 8px 0 0 26px; + margin-inline-start: 42px; + padding-top:8px; + padding-inline-start: 26px; cursor: default; color: $darker-text-color; font-size: 15px; @@ -346,7 +347,7 @@ &__icons { position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); font-size: 24px; } @@ -431,7 +432,7 @@ &__message { position: relative; - margin-left: 58px; + margin-inline-start: 58px; color: $dark-text-color; padding: 8px 0; padding-top: 0; @@ -446,7 +447,7 @@ } &__icon-wrapper { - left: -26px; + inset-inline-start: -26px; position: absolute; } @@ -500,7 +501,7 @@ &__info { position: absolute; top: 10px; - left: 10px; + inset-inline-start: 10px; } &__image { @@ -544,7 +545,7 @@ margin-top: -81px; height: 130px; overflow: hidden; - margin-left: -2px; // aligns the pfp with content below + margin-inline-start: -2px; // aligns the pfp with content below .account-role { margin: 0 2px; @@ -635,8 +636,8 @@ color: $darker-text-color; .columns-area--mobile & { - padding-left: 20px; - padding-right: 20px; + padding-inline-start: 20px; + padding-inline-end: 20px; } } @@ -769,7 +770,8 @@ } .moved-account-banner, -.follow-request-banner { +.follow-request-banner, +.account-memorial-banner { padding: 20px; background: lighten($ui-base-color, 4%); display: flex; @@ -803,3 +805,7 @@ .follow-request-banner .button { width: 100%; } + +.account-memorial-banner__message { + margin-bottom: 0; +} diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss index feaff81f5..be27120a7 100644 --- a/app/javascript/flavours/glitch/styles/components/announcements.scss +++ b/app/javascript/flavours/glitch/styles/components/announcements.scss @@ -84,13 +84,13 @@ 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%; @@ -104,7 +104,7 @@ color: $darker-text-color; position: absolute; bottom: 3px; - right: 0; + inset-inline-end: 0; } } @@ -121,7 +121,7 @@ flex-wrap: wrap; align-items: center; margin-top: 15px; - margin-left: -2px; + margin-inline-start: -2px; width: calc(100% - (90px - 33px)); &__item { @@ -162,7 +162,7 @@ font-size: 13px; font-weight: 500; text-align: center; - margin-left: 6px; + margin-inline-start: 6px; color: $darker-text-color; } diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 907f820d6..a72afe726 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -182,7 +182,8 @@ $ui-header-height: 55px; cursor: pointer; flex: 0 0 auto; font-size: 16px; - padding: 0 5px 0 0; + padding: 0; + padding-inline-end: 5px; z-index: 3; &:hover { @@ -190,13 +191,14 @@ $ui-header-height: 55px; } &:last-child { - padding: 0 15px 0 0; + padding: 0; + padding-inline-end: 15px;; } } .column-back-button__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-back-button--slim { @@ -209,7 +211,7 @@ $ui-header-height: 55px; font-size: 16px; padding: 15px; position: absolute; - right: 0; + inset-inline-end: 0; top: -48px; } @@ -263,7 +265,7 @@ $ui-header-height: 55px; .column-link__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-subheading { @@ -289,8 +291,8 @@ $ui-header-height: 55px; 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; @@ -329,7 +331,7 @@ $ui-header-height: 55px; color: inherit; background: transparent; font: inherit; - text-align: left; + text-align: start; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -377,7 +379,7 @@ $ui-header-height: 55px; .column-header__buttons { height: 48px; display: flex; - margin-left: 0; + margin-inline-start: 0; } .column-header__links { @@ -385,7 +387,7 @@ $ui-header-height: 55px; } .column-header__links .text-btn { - margin-right: 10px; + margin-inline-end: 10px; } .column-header__button { @@ -444,7 +446,7 @@ $ui-header-height: 55px; @media screen and (min-width: $no-gap-breakpoint) { b, i { - margin-right: 5px; + margin-inline-end: 5px; } br { @@ -530,12 +532,12 @@ $ui-header-height: 55px; 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; } } } @@ -559,7 +561,7 @@ $ui-header-height: 55px; .column-header__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-settings__pillbar { @@ -725,7 +727,7 @@ $ui-header-height: 55px; .column-inline-form { padding: 7px 15px; - padding-right: 5px; + padding-inline-end: 5px; display: flex; justify-content: flex-start; align-items: center; @@ -801,12 +803,12 @@ $ui-header-height: 55px; &__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 { @@ -889,7 +891,7 @@ $ui-header-height: 55px; &__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } h2 { @@ -948,7 +950,7 @@ $ui-header-height: 55px; &__background { position: absolute; - left: 0; + inset-inline-start: 0; bottom: 0; height: 220px; width: auto; diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index 1c2e0aeb4..d7b8281ee 100644 --- a/app/javascript/flavours/glitch/styles/components/compose_form.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -4,7 +4,7 @@ .emoji-picker-dropdown { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { @@ -113,8 +113,8 @@ width: 18px; height: 18px; flex: 0 0 auto; - margin-left: 5px; - margin-right: 10px; + margin-inline-start: 5px; + margin-inline-end: 10px; top: -1px; border-radius: 4px; vertical-align: middle; @@ -254,13 +254,14 @@ display: block; position: absolute; top: 29px; - right: 5px; + inset-inline-end: 5px; bottom: 5px; overflow: hidden; & > .textarea_icon { display: block; - margin: 2px 0 0 2px; + margin-top: 2px; + margin-inline-start: 2px; width: 24px; height: 24px; color: $lighter-text-color; @@ -334,7 +335,7 @@ &__uses { flex: 0 0 auto; - text-align: right; + text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -403,8 +404,8 @@ 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, @@ -435,7 +436,7 @@ .fa { font-size: 34px; - margin-right: 10px; + margin-inline-end: 10px; } span { @@ -462,7 +463,7 @@ .upload-progress__tracker { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; height: 6px; border-radius: 6px; background: $ui-highlight-color; @@ -515,7 +516,7 @@ .character-counter__wrapper { align-self: center; - margin-right: 4px; + margin-inline-end: 4px; } .privacy-dropdown.active { @@ -567,7 +568,7 @@ color: $lighter-text-color; &:not(:first-child) { - margin-left: 10px; + margin-inline-start: 10px; } strong { @@ -635,11 +636,11 @@ } .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 { diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss index 5c763764d..db9a23bce 100644 --- a/app/javascript/flavours/glitch/styles/components/directory.scss +++ b/app/javascript/flavours/glitch/styles/components/directory.scss @@ -55,7 +55,7 @@ width: 18px; height: 18px; flex: 0 0 auto; - margin-right: 10px; + margin-inline-end: 10px; top: -1px; border-radius: 50%; vertical-align: middle; diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss index 52c7cd54a..c3b67da4a 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.scss @@ -35,8 +35,8 @@ $doodle-background: #d9e1e8; label { display: inline-block; width: 70px; - text-align: right; - margin-right: 2px; + text-align: end; + margin-inline-end: 2px; } input[type='number'], @@ -46,14 +46,14 @@ $doodle-background: #d9e1e8; span.val { display: inline-block; - text-align: left; + text-align: start; width: 50px; } } } .doodle-palette { - padding-right: 0 !important; + padding-inline-end: 0 !important; border: 1px solid black; line-height: 0.2rem; flex-grow: 0; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 3e482774e..a9c683c37 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -8,11 +8,11 @@ flex: none; &:first-child { - padding-left: 10px; + padding-inline-start: 10px; } &:last-child { - padding-right: 10px; + padding-inline-end: 10px; } @include single-column('screen and (max-width: 630px)') { @@ -126,7 +126,7 @@ .navigation-bar__profile { flex: 1 1 auto; - margin-left: 8px; + margin-inline-start: 8px; overflow: hidden; & > a:hover { @@ -154,7 +154,7 @@ .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -191,7 +191,7 @@ .drawer__inner { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; background: lighten($ui-base-color, 13%); box-sizing: border-box; padding: 0; @@ -241,14 +241,14 @@ .pseudo-drawer { background: lighten($ui-base-color, 13%); font-size: 13px; - text-align: left; + text-align: start; } .drawer__backdrop { cursor: pointer; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background: rgba($base-overlay-background, 0.5); diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index 4427f2080..f76288978 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -31,7 +31,7 @@ .emoji-picker-dropdown__modifiers { position: absolute; top: 60px; - right: 11px; + inset-inline-end: 11px; cursor: pointer; } @@ -39,7 +39,7 @@ 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); @@ -72,7 +72,10 @@ .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; diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 6bb9827b3..e402838db 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -71,7 +71,7 @@ .emoji-mart-anchor-bar { position: absolute; bottom: -3px; - left: 0; + inset-inline-start: 0; width: 100%; height: 3px; background-color: darken($ui-highlight-color, 3%); @@ -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/flavours/glitch/styles/components/error_boundary.scss b/app/javascript/flavours/glitch/styles/components/error_boundary.scss index 3176690e2..fbbb1ceb0 100644 --- a/app/javascript/flavours/glitch/styles/components/error_boundary.scss +++ b/app/javascript/flavours/glitch/styles/components/error_boundary.scss @@ -17,8 +17,8 @@ ul { list-style: disc; - margin-left: 0; - padding-left: 1em; + margin-inline-start: 0; + padding-inline-start: 1em; } textarea.web_app_crash-stacktrace { diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss index bad77fc1c..8f67b365f 100644 --- a/app/javascript/flavours/glitch/styles/components/explore.scss +++ b/app/javascript/flavours/glitch/styles/components/explore.scss @@ -20,7 +20,7 @@ .search .fa { top: 10px; - right: 10px; + inset-inline-end: 10px; color: $dark-text-color; } @@ -104,7 +104,7 @@ object-fit: fill; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; &--hidden { diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 52516cfb5..dee42bfdd 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -20,12 +20,12 @@ .boolean label, .radio_buttons label { position: relative; - padding-left: 28px; + padding-inline-start: 28px; padding-top: 3px; input { position: absolute; - left: 0; + inset-inline-start: 0; top: 0; } } @@ -149,7 +149,7 @@ ul { padding: 10px; - margin-left: 12px; + margin-inline-start: 12px; list-style: disc inside; } diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 6d6b8bc0e..e1a6ae309 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -49,7 +49,7 @@ 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; @@ -133,7 +133,7 @@ object-fit: cover; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; background: $base-overlay-background; @@ -207,16 +207,16 @@ .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; @@ -259,18 +259,18 @@ } .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; @@ -357,7 +357,7 @@ .media-modal__close { position: absolute; - right: 8px; + inset-inline-end: 8px; top: 8px; z-index: 100; } @@ -502,8 +502,8 @@ 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, @@ -531,7 +531,7 @@ display: none; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; z-index: 4; @@ -654,7 +654,7 @@ &.active { overflow: visible; width: 50px; - margin-right: 16px; + margin-inline-end: 16px; } &::before { @@ -665,7 +665,7 @@ display: block; position: absolute; height: 4px; - left: 0; + inset-inline-start: 0; top: 50%; transform: translate(0, -50%); } @@ -675,7 +675,7 @@ 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%); @@ -688,8 +688,8 @@ 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); @@ -760,7 +760,7 @@ 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); diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss index 86b8b99c1..627500115 100644 --- a/app/javascript/flavours/glitch/styles/components/misc.scss +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -281,13 +281,15 @@ display: inline-flex; align-items: center; width: auto !important; - padding: 0 4px 0 2px; + padding: 0; + padding-inline-end: 4px; + padding-inline-start: 2px; } &__counter { display: inline-block; width: auto; - margin-left: 4px; + margin-inline-start: 4px; font-size: 12px; font-weight: 500; } @@ -375,7 +377,7 @@ body > [data-popper-placement] { } .notification__favourite-icon-wrapper { - left: 0; + inset-inline-start: 0; position: absolute; .fa.star-icon { @@ -654,7 +656,7 @@ body > [data-popper-placement] { } &.right { - left: -9px; + inset-inline-start: -9px; &::before { transform: rotate(-90deg); @@ -666,7 +668,7 @@ body > [data-popper-placement] { } &.left { - right: -9px; + inset-inline-end: -9px; &::before { transform: rotate(90deg); @@ -749,8 +751,8 @@ body > [data-popper-placement] { display: block; line-height: 18px; max-width: 311px; - right: 0; - text-align: left; + inset-inline-end: 0; + text-align: start; z-index: 9999; & > ul { @@ -764,12 +766,12 @@ body > [data-popper-placement] { } &.dropdown__right { - right: 0; + inset-inline-end: 0; } &.dropdown__left { & > ul { - left: -98px; + inset-inline-start: -98px; } } @@ -834,23 +836,23 @@ body > [data-popper-placement] { .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; } } } @@ -897,12 +899,12 @@ body > [data-popper-placement] { } span { - margin-left: 5px; + margin-inline-start: 5px; display: none; } span.icon { - margin-left: 0; + margin-inline-start: 0; display: inline; } } @@ -912,7 +914,7 @@ body > [data-popper-placement] { &__badge { position: absolute; - left: 9px; + inset-inline-start: 9px; top: -13px; background: $ui-highlight-color; border: 2px solid lighten($ui-base-color, 8%); @@ -926,7 +928,7 @@ body > [data-popper-placement] { &__issue-badge { position: absolute; - left: 11px; + inset-inline-start: 11px; bottom: 1px; display: block; background: $error-red; @@ -1039,7 +1041,7 @@ body > [data-popper-placement] { margin-top: auto; margin-bottom: auto; line-height: 0; - left: 8px; + inset-inline-start: 8px; opacity: 0; transition: opacity 0.25s ease; } @@ -1058,7 +1060,7 @@ body > [data-popper-placement] { margin-top: auto; margin-bottom: auto; line-height: 0; - right: 10px; + inset-inline-end: 10px; opacity: 1; transition: opacity 0.25s ease; } @@ -1070,7 +1072,7 @@ body > [data-popper-placement] { .react-toggle-thumb { position: absolute; top: 1px; - left: 1px; + inset-inline-start: 1px; width: 22px; height: 22px; border: 1px solid $ui-base-color; @@ -1082,7 +1084,7 @@ body > [data-popper-placement] { } .react-toggle--checked .react-toggle-thumb { - left: 27px; + inset-inline-start: 27px; border-color: $ui-highlight-color; } @@ -1176,7 +1178,7 @@ body > [data-popper-placement] { thead { position: absolute; - left: -9999px; + inset-inline-start: -9999px; } td { @@ -1318,9 +1320,9 @@ button.icon-button.active i.fa-retweet { overflow: hidden; position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: -1px; - padding-left: 15px; // space for the box shadow to be visible + padding-inline-start: 15px; // space for the box shadow to be visible z-index: 999; align-items: center; justify-content: flex-end; @@ -1335,7 +1337,7 @@ button.icon-button.active i.fa-retweet { align-items: center; justify-content: center; background: lighten($ui-base-color, 8%); - border-left: 1px solid lighten($ui-base-color, 20%); + border-inline-start: 1px solid lighten($ui-base-color, 20%); box-shadow: 0 0 5px black; border-bottom: 1px solid $ui-base-color; } @@ -1381,7 +1383,7 @@ button.icon-button.active i.fa-retweet { overflow: visible; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; @@ -1473,7 +1475,7 @@ button.icon-button.active i.fa-retweet { .spoiler-button { top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; position: absolute; @@ -1481,7 +1483,7 @@ button.icon-button.active i.fa-retweet { &--minified { display: flex; - left: 4px; + inset-inline-start: 4px; top: 4px; width: auto; height: auto; @@ -1539,7 +1541,7 @@ button.icon-button.active i.fa-retweet { color: $darker-text-color; display: inline-block; margin-bottom: 14px; - margin-left: 8px; + margin-inline-start: 8px; vertical-align: middle; } @@ -1589,7 +1591,7 @@ button.icon-button.active i.fa-retweet { display: flex; height: 100vh; justify-content: center; - left: 0; + inset-inline-start: 0; opacity: 0; position: fixed; top: 0; @@ -1614,9 +1616,9 @@ button.icon-button.active i.fa-retweet { .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; @@ -1646,7 +1648,7 @@ button.icon-button.active i.fa-retweet { height: 3px; position: fixed; top: 0; - left: 0; + inset-inline-start: 0; z-index: 9999; } @@ -1657,7 +1659,7 @@ button.icon-button.active i.fa-retweet { .icon-badge { position: absolute; display: block; - right: -0.25em; + inset-inline-end: -0.25em; top: -0.25em; background-color: $ui-highlight-color; border-radius: 50%; @@ -1710,7 +1712,7 @@ button.icon-button.active i.fa-retweet { &__relative-time { font-size: 15px; color: $darker-text-color; - padding-left: 15px; + padding-inline-start: 15px; } &__names { @@ -1759,8 +1761,8 @@ button.icon-button.active i.fa-retweet { .ui .flash-message { margin-top: 10px; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; margin-bottom: 0; min-width: 75%; } diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 65060f422..354e5a04f 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -10,8 +10,8 @@ .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; @@ -20,7 +20,7 @@ .modal-root__container { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; @@ -41,7 +41,7 @@ .media-modal__zoom-button { position: absolute; - right: 64px; + inset-inline-end: 64px; top: 8px; z-index: 100; pointer-events: auto; @@ -93,7 +93,7 @@ & > div { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; @@ -292,8 +292,8 @@ } &__extra { - padding-right: 65px; - padding-left: 185px; + padding-inline-end: 65px; + padding-inline-start: 185px; text-align: center; } } @@ -325,7 +325,7 @@ .onboarding-modal__page-four, .onboarding-modal__page-five { p { - text-align: left; + text-align: start; } .figure { @@ -345,7 +345,7 @@ &.non-interactive { pointer-events: none; - text-align: left; + text-align: start; } } } @@ -360,11 +360,11 @@ margin: 0 10px; &:first-child { - margin-left: 0; + margin-inline-start: 0; } &:last-child { - margin-right: 0; + margin-inline-end: 0; } p { @@ -410,7 +410,7 @@ display: inline-block; max-width: 30px; max-height: auto; - margin-left: 10px; + margin-inline-start: 10px; } .boost-modal, @@ -497,9 +497,9 @@ & > div { flex: 1 1 auto; - text-align: right; + text-align: end; color: $lighter-text-color; - padding-right: 10px; + padding-inline-end: 10px; } .button { @@ -711,7 +711,7 @@ & > span { font-size: 17px; font-weight: 500; - margin-left: 10px; + margin-inline-start: 10px; } } @@ -735,11 +735,11 @@ } .emoji-mart-search { - padding-right: 10px; + padding-inline-end: 10px; } .emoji-mart-search-icon { - right: 10px + 5px; + inset-inline-end: 10px + 5px; } } @@ -797,7 +797,7 @@ .report-modal__comment { padding: 20px; - border-right: 1px solid $ui-secondary-color; + border-inline-end: 1px solid $ui-secondary-color; max-width: 320px; p { @@ -947,7 +947,7 @@ & > .react-toggle, & > .icon, button:first-child { - margin-right: 10px; + margin-inline-end: 10px; } } } @@ -980,8 +980,8 @@ } .confirmation-modal__do_not_ask_again { - padding-left: 20px; - padding-right: 20px; + padding-inline-start: 20px; + padding-inline-end: 20px; padding-bottom: 10px; font-size: 14px; @@ -1023,7 +1023,7 @@ border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; - padding-right: 30px; + padding-inline-end: 30px; } } @@ -1047,7 +1047,7 @@ &__label { color: $inverted-text-color; margin: 0; - margin-left: 8px; + margin-inline-start: 8px; } } } @@ -1058,7 +1058,7 @@ .report-modal__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } } @@ -1204,13 +1204,13 @@ 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; @@ -1270,7 +1270,7 @@ ul { padding: 10px; - margin-left: 12px; + margin-inline-start: 12px; list-style: disc inside; } diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss index 93123075e..cab78402b 100644 --- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss +++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss @@ -89,7 +89,7 @@ &::before { content: counter(list-counter) '.'; position: absolute; - left: 0; + inset-inline-start: 0; } } @@ -101,13 +101,13 @@ 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 { diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index a6e98a868..f93e14d76 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -8,7 +8,7 @@ display: block; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; line-height: 18px; font-size: 16px; @@ -44,7 +44,7 @@ .fa { position: absolute; top: 16px; - right: 10px; + inset-inline-end: 10px; z-index: 2; display: inline-block; opacity: 0; @@ -98,7 +98,7 @@ .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -120,7 +120,7 @@ .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -170,7 +170,7 @@ flex: 0 0 auto; font-size: 24px; font-weight: 500; - text-align: right; + text-align: end; color: $secondary-text-color; text-decoration: none; } diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.scss index 490951fb4..c77515eb7 100644 --- a/app/javascript/flavours/glitch/styles/components/sensitive.scss +++ b/app/javascript/flavours/glitch/styles/components/sensitive.scss @@ -4,7 +4,7 @@ align-items: center; position: absolute; top: 4px; - left: 4px; + inset-inline-start: 4px; z-index: 100; } diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss index efb49305d..18492983e 100644 --- a/app/javascript/flavours/glitch/styles/components/signed_out.scss +++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss @@ -101,7 +101,7 @@ } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .spacer { diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 036b3f6ef..6563fa47b 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -30,7 +30,7 @@ line-height: 18px; font-size: 16px; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; } .search__icon .fa { @@ -130,7 +130,7 @@ line-height: 18px; font-size: 16px; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; } .search__icon .fa { @@ -174,11 +174,12 @@ } .notification__report { - padding: 15px 15px 15px (48px + 15px * 2); + padding: 15px; + padding-inline-start: (48px + 15px * 2); min-height: 48px + 2px; &__avatar { - left: 15px; + inset-inline-start: 15px; top: 17px; } } @@ -265,7 +266,7 @@ .navigation-panel { margin: 0; background: $ui-base-color; - border-left: 1px solid lighten($ui-base-color, 8%); + border-inline-start: 1px solid lighten($ui-base-color, 8%); height: 100vh; } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 21c28919a..2b52051e4 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -164,9 +164,10 @@ .status__content__spoiler-icon { display: inline-block; - margin: 0 0 0 5px; - border-left: 1px solid currentColor; - padding: 0 0 0 4px; + margin-inline-start: 5px; + border-inline-start: 1px solid currentColor; + padding: 0; + padding-inline-start: 4px; font-size: 16px; vertical-align: -2px; } @@ -195,7 +196,7 @@ } .status__prepend-icon-wrapper { - left: -26px; + inset-inline-start: -26px; position: absolute; } @@ -241,7 +242,7 @@ @supports (-ms-overflow-style: -ms-autohiding-scrollbar) { // Add margin to avoid Edge auto-hiding scrollbar appearing over content. // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px. - padding-right: 28px; // 12px + 16px + padding-inline-end: 28px; // 12px + 16px } @keyframes fade { @@ -310,8 +311,8 @@ &.has-background::before { display: block; position: absolute; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; top: 0; bottom: 0; background-image: linear-gradient( @@ -339,8 +340,8 @@ position: absolute; top: 0; bottom: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; background: linear-gradient( rgba($ui-base-color, 0), rgba($ui-base-color, 1) @@ -399,7 +400,7 @@ display: inline-block; color: $dark-text-color; font-size: 14px; - text-align: right; + text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -440,8 +441,8 @@ .status__visibility-icon, .status__reply-icon, .text-icon { - padding-left: 2px; - padding-right: 2px; + padding-inline-start: 2px; + padding-inline-end: 2px; } .status__collapse-button.active > .fa-angle-double-up { @@ -507,7 +508,7 @@ .status__prepend { margin-top: -2px; margin-bottom: 8px; - margin-left: 58px; + margin-inline-start: 58px; color: $dark-text-color; font-size: 14px; position: relative; @@ -534,10 +535,10 @@ } .status__action-bar-button { - margin-right: 18px; + margin-inline-end: 18px; &.icon-button--with-counter { - margin-right: 14px; + margin-inline-end: 14px; } } @@ -618,7 +619,7 @@ font-weight: 500; font-size: 12px; line-height: 17px; - margin-left: 6px; + margin-inline-start: 6px; } .status__display-name, @@ -689,12 +690,12 @@ a.status__display-name, .detailed-status__display-avatar { float: left; - margin-right: 10px; + margin-inline-end: 10px; } .status__avatar { flex: none; - margin: 0 10px 0 0; + margin-inline-end: 10px; height: 48px; width: 48px; } @@ -747,9 +748,9 @@ a.status__display-name, &__actions { bottom: 0; - left: 0; + inset-inline-start: 0; position: absolute; - right: 0; + inset-inline-end: 0; top: 0; display: flex; justify-content: center; @@ -834,7 +835,8 @@ a.status-card { .status-card__content { flex: 1 1 auto; overflow: hidden; - padding: 14px 14px 14px 8px; + padding: 14px; + padding-inline-start: 8px; } .status-card__description { @@ -860,7 +862,7 @@ a.status-card { position: absolute; transform-origin: 50% 50%; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); } } @@ -927,7 +929,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; @@ -949,7 +951,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-inline-end: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: column; align-items: center; @@ -964,7 +966,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; @@ -1024,10 +1026,10 @@ a.status-card.compact:hover { content: ''; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; - border-left: 4px solid $highlight-text-color; + border-inline-start: 4px solid $highlight-text-color; pointer-events: none; } } @@ -1036,12 +1038,12 @@ a.status-card.compact:hover { .picture-in-picture { position: fixed; bottom: 20px; - right: 20px; + inset-inline-end: 20px; width: 300px; &.left { - right: unset; - left: 20px; + inset-inline-end: unset; + inset-inline-start: 20px; } &__footer { @@ -1067,7 +1069,7 @@ a.status-card.compact:hover { } .account__avatar { - margin-right: 10px; + margin-inline-end: 10px; } .display-name { diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index b90851546..d75ccecee 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -18,7 +18,7 @@ .logo { height: 42px; - margin-right: 10px; + margin-inline-end: 10px; } a { @@ -75,7 +75,7 @@ height: 40px; @include avatar-size(40px); - margin-right: 10px; + margin-inline-end: 10px; img { width: 100%; @@ -104,6 +104,6 @@ display: block; font-size: 32px; line-height: 40px; - margin-left: 10px; + margin-inline-start: 10px; } } diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 9692df786..3a59b1ddd 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/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 { @@ -157,7 +157,7 @@ code { li { list-style: disc; - margin-left: 18px; + margin-inline-start: 18px; } } @@ -223,7 +223,7 @@ code { &.select .hint { margin-top: 6px; - margin-left: 150px; + margin-inline-start: 150px; } } @@ -378,13 +378,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; } @@ -515,10 +515,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, @@ -570,8 +570,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; } @@ -586,7 +586,7 @@ code { &__append { position: absolute; - right: 3px; + inset-inline-end: 3px; top: 1px; padding: 10px; padding-bottom: 9px; @@ -604,7 +604,7 @@ code { display: block; position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 1px; width: 5px; background-image: linear-gradient( @@ -778,7 +778,7 @@ code { li { display: inline-block; - margin-right: 10px; + margin-inline-end: 10px; } a { @@ -864,7 +864,8 @@ code { flex: 0 0 auto; background: $simple-background-color; padding: 4px; - margin: 0 10px 20px 0; + margin-inline-end: 10px; + margin-bottom: 20px; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); display: inline-block; @@ -937,7 +938,7 @@ code { .actions { padding: 30px 0; - padding-right: 20px; + padding-inline-end: 20px; flex: 0 0 auto; } } @@ -990,7 +991,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; @@ -1114,3 +1115,89 @@ code { white-space: nowrap; } } + +.progress-tracker { + display: flex; + align-items: center; + padding-bottom: 30px; + margin-bottom: 30px; + + li { + flex: 0 0 auto; + position: relative; + } + + .separator { + height: 2px; + background: $ui-base-lighter-color; + flex: 1 1 auto; + + &.completed { + background: $highlight-text-color; + } + } + + .circle { + box-sizing: border-box; + position: relative; + width: 30px; + height: 30px; + border-radius: 50%; + border: 2px solid $ui-base-lighter-color; + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 16px; + } + } + + .label { + position: absolute; + font-size: 14px; + font-weight: 500; + color: $secondary-text-color; + padding-top: 10px; + text-align: center; + width: 100px; + left: 50%; + transform: translateX(-50%); + } + + li:first-child .label { + left: auto; + inset-inline-start: 0; + text-align: start; + transform: none; + } + + li:last-child .label { + left: auto; + inset-inline-end: 0; + text-align: end; + transform: none; + } + + .active .circle { + border-color: $highlight-text-color; + + &::before { + content: ''; + width: 10px; + height: 10px; + border-radius: 50%; + background: $highlight-text-color; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + + .completed .circle { + border-color: $highlight-text-color; + background: $highlight-text-color; + } +} diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss index 6170877b2..29b1f162b 100644 --- a/app/javascript/flavours/glitch/styles/modal.scss +++ b/app/javascript/flavours/glitch/styles/modal.scss @@ -25,7 +25,7 @@ height: 100%; position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; } } } diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss index a4ce14a09..6f1cf0589 100644 --- a/app/javascript/flavours/glitch/styles/polls.scss +++ b/app/javascript/flavours/glitch/styles/polls.scss @@ -277,7 +277,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/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/rich_text.scss index 081641f0b..70138809a 100644 --- a/app/javascript/flavours/glitch/styles/rich_text.scss +++ b/app/javascript/flavours/glitch/styles/rich_text.scss @@ -13,8 +13,8 @@ } blockquote { - padding-left: 10px; - border-left: 3px solid $darker-text-color; + padding-inline-start: 10px; + border-inline-start: 3px solid $darker-text-color; color: $darker-text-color; white-space: normal; @@ -75,7 +75,7 @@ ul, ol { - margin-left: 2em; + margin-inline-start: 2em; p { margin: 0; diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index 64a5c2c03..ebc35bb0c 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -1,131 +1,43 @@ 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 { - text-align: right; - } - - .notification__message { - margin-left: 0; - margin-right: 68px; + .reactions-bar { + direction: rtl; } .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 .character-counter__wrapper { - margin-right: 0; - margin-left: 4px; - } - .boost-modal__status-time { float: left; } - .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; + .react-swipeable-view-container > * { + direction: rtl; } .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; } .setting-meta__label { float: left; } - .status__avatar { - margin-left: 10px; - margin-right: 0; - - // Those are used for public pages - left: auto; - right: 10px; - } - .activity-stream .status.light { padding-left: 10px; padding-right: 68px; @@ -142,16 +54,6 @@ body.rtl { padding-left: 0; } - .status__prepend { - margin-left: 0; - margin-right: 58px; - } - - .status__prepend-icon-wrapper { - left: auto; - right: -26px; - } - .activity-stream .pre-header .pre-header__icon { left: auto; right: 42px; @@ -162,138 +64,34 @@ body.rtl { margin-left: 8px; } - .account__avatar-overlay-overlay { - right: auto; - left: 0; - } - - .column-back-button--slim-button { - right: auto; - left: 0; - } - .status__relative-time, .activity-stream .status.light .status__header .status__meta { float: left; text-align: left; } - .status__action-bar { - &__counter { - margin-right: 0; - margin-left: 11px; - - .status__action-bar-button { - margin-right: 0; - margin-left: 4px; - } - } - } - .status__action-bar-button { float: right; - margin-right: 0; - margin-left: 18px; } .status__action-bar-dropdown { float: right; } - .privacy-dropdown__dropdown { - margin-left: 0; - margin-right: 40px; - } - - .privacy-dropdown__option__icon { - margin-left: 10px; - margin-right: 0; - } - .detailed-status__display-name .display-name { text-align: right; } .detailed-status__display-avatar { - margin-right: 0; - margin-left: 10px; float: right; } - .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), @@ -308,49 +106,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'; } @@ -358,14 +113,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; - } } diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss index f7037d9dc..77e9d38bd 100644 --- a/app/javascript/flavours/glitch/styles/statuses.scss +++ b/app/javascript/flavours/glitch/styles/statuses.scss @@ -93,7 +93,7 @@ width: 20px; height: auto; vertical-align: middle; - margin-right: 5px; + margin-inline-end: 5px; fill: $primary-text-color; } @@ -154,11 +154,12 @@ a.button.logo-button { } .status { - padding: 15px 15px 15px (48px + 15px * 2); + padding: 15px; + padding-inline-start: (48px + 15px * 2); min-height: 48px + 2px; &__avatar { - left: 15px; + inset-inline-start: 15px; top: 17px; .account__avatar { @@ -175,7 +176,7 @@ a.button.logo-button { padding: 8px 0; padding-bottom: 2px; margin: initial; - margin-left: 48px + 15px * 2; + margin-inline-start: 48px + 15px * 2; padding-top: 15px; } @@ -184,7 +185,7 @@ a.button.logo-button { margin: initial; float: initial; width: auto; - left: -32px; + inset-inline-start: -32px; } .media-gallery, diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index 14daf591e..0c730f1a7 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/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-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-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/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss index 0f2b7ac5b..f54d2f2e5 100644 --- a/app/javascript/flavours/glitch/styles/widgets.scss +++ b/app/javascript/flavours/glitch/styles/widgets.scss @@ -165,7 +165,7 @@ margin-bottom: 15px; .fa { - margin-right: 5px; + margin-inline-end: 5px; color: $darker-text-color; } } @@ -298,7 +298,7 @@ padding: 10px; &:first-child { - text-align: left; + text-align: start; } } @@ -329,9 +329,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; |