diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
22 files changed, 238 insertions, 221 deletions
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 { |