diff options
Diffstat (limited to 'app/javascript/styles/mastodon')
| -rw-r--r-- | app/javascript/styles/mastodon/about.scss | 4 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/accessibility.scss | 5 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/accounts.scss | 16 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/admin.scss | 113 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/basics.scss | 8 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/components.scss | 649 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/containers.scss | 6 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/emoji_picker.scss | 12 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/forms.scss | 82 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/modal.scss | 6 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/polls.scss | 20 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/rich_text.scss | 64 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/rtl.scss | 365 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/statuses.scss | 10 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/tables.scss | 22 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/variables.scss | 31 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/widgets.scss | 18 |
17 files changed, 699 insertions, 732 deletions
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 0183c43d5..0f02563b4 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -28,14 +28,14 @@ $fluid-breakpoint: $maximum-width + 20px; position: relative; border-bottom: 1px solid lighten($ui-base-color, 8%); padding: 1em 1.75em; - padding-left: 3em; + padding-inline-start: 3em; font-weight: 500; counter-increment: list-counter; &::before { content: counter(list-counter); position: absolute; - left: 0; + inset-inline-start: 0; top: 50%; transform: translateY(-50%); background: $highlight-text-color; diff --git a/app/javascript/styles/mastodon/accessibility.scss b/app/javascript/styles/mastodon/accessibility.scss index c5bcb5941..deaa0afda 100644 --- a/app/javascript/styles/mastodon/accessibility.scss +++ b/app/javascript/styles/mastodon/accessibility.scss @@ -1,4 +1,7 @@ -$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default; +$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' + 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' + 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' + 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default; %emoji-color-inversion { filter: invert(1); diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 0497d51d5..71bd20ebf 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -36,10 +36,6 @@ @media screen and (max-width: 600px) { height: 200px; } - - @media screen and (max-width: $no-gap-breakpoint) { - display: none; - } } &__bar { @@ -73,8 +69,8 @@ } .display-name { - margin-left: 15px; - text-align: left; + margin-inline-start: 15px; + text-align: start; i[data-hidden] { display: none; @@ -139,21 +135,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-end: 0; .fa { display: inline-block; - margin-left: 5px; + margin-inline-start: 5px; } } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 4250cf2b6..acb4baf4f 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1,4 +1,4 @@ -@use "sass:math"; +@use 'sass:math'; $no-columns-breakpoint: 600px; $sidebar-width: 240px; @@ -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; } } @@ -384,8 +388,8 @@ $content-width: 840px; position: fixed; z-index: 10; width: 100%; - height: calc(100vh - 56px); - left: 0; + height: calc(100% - 56px); + 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; } } @@ -588,7 +593,7 @@ body, .activity-stream { flex: 2 0 0; - margin-right: 20px; + margin-inline-end: 20px; max-width: calc(100% - 60px); .entry { @@ -641,7 +646,7 @@ body, } .media-spoiler-toggle-buttons { - margin-left: auto; + margin-inline-start: auto; .button { overflow: visible; @@ -667,7 +672,7 @@ body, .special-action-button, .back-link { - text-align: right; + text-align: end; flex: 1 1 auto; } @@ -685,7 +690,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 +717,7 @@ body, &__avatar { position: absolute; - left: 15px; + inset-inline-start: 15px; top: 15px; .avatar { @@ -780,7 +785,7 @@ a.name-tag, .avatar { display: block; margin: 0; - margin-right: 5px; + margin-inline-end: 5px; border-radius: 50%; } @@ -794,7 +799,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 +815,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 +829,7 @@ a.name-tag, &__owner { padding: 8px; - padding-left: 12px; + padding-inline-start: 12px; } time { @@ -848,7 +853,7 @@ a.name-tag, border: 0; &__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } } @@ -857,7 +862,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 +913,7 @@ a.name-tag, &__icon { color: $dark-text-color; - margin-right: 4px; + margin-inline-end: 4px; font-weight: 500; } } @@ -1106,7 +1111,7 @@ a.name-tag, > h4 { position: sticky; - left: 0; + inset-inline-start: 0; } &__table { @@ -1118,7 +1123,7 @@ a.name-tag, &__date { white-space: nowrap; padding: 10px 0; - text-align: left; + text-align: start; min-width: 120px; &.retention__table__average { @@ -1147,7 +1152,10 @@ a.name-tag, @for $i from 0 through 10 { &--#{10 * $i} { - background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10))); + background-color: rgba( + $ui-highlight-color, + 1 * (math.div(max(1, $i), 10)) + ); } } } @@ -1173,7 +1181,7 @@ a.name-tag, &__total { display: block; - margin-right: 10px; + margin-inline-end: 10px; font-weight: 500; font-size: 28px; color: $primary-text-color; @@ -1236,7 +1244,12 @@ a.sparkline { .skeleton { background-color: lighten($ui-base-color, 8%); - background-image: linear-gradient(90deg, lighten($ui-base-color, 8%), lighten($ui-base-color, 12%), lighten($ui-base-color, 8%)); + background-image: linear-gradient( + 90deg, + lighten($ui-base-color, 8%), + lighten($ui-base-color, 12%), + lighten($ui-base-color, 8%) + ); background-size: 200px 100%; background-repeat: no-repeat; border-radius: 4px; @@ -1270,7 +1283,7 @@ a.sparkline { } &__value { - text-align: right; + text-align: end; color: $darker-text-color; padding: 11px 10px; } @@ -1281,11 +1294,14 @@ 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} { - background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10))); + background-color: rgba( + $ui-highlight-color, + 1 * (math.div(max(1, $i), 10)) + ); } } } @@ -1314,7 +1330,7 @@ a.sparkline { } &__rules { - margin-left: 30px; + margin-inline-start: 30px; } } @@ -1431,12 +1447,12 @@ a.sparkline { &::after { display: block; - content: ""; + content: ''; width: 50px; height: 21px; position: absolute; bottom: 0; - right: 15px; + inset-inline-end: 15px; background: linear-gradient(to left, $ui-base-color, transparent); pointer-events: none; } @@ -1516,7 +1532,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 { @@ -1536,7 +1552,7 @@ a.sparkline { &__avatar { position: absolute; - left: 15px; + inset-inline-start: 15px; top: 15px; border-radius: 4px; width: 40px; @@ -1552,7 +1568,7 @@ a.sparkline { .username { color: $primary-text-color; font-weight: 500; - margin-right: 5px; + margin-inline-end: 5px; a { color: inherit; @@ -1567,7 +1583,7 @@ a.sparkline { } time { - margin-left: 5px; + margin-inline-start: 5px; vertical-align: baseline; } } @@ -1588,13 +1604,22 @@ a.sparkline { margin-bottom: 0; } } + + a { + color: $highlight-text-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } } &__actions { position: absolute; top: 15px; - right: 15px; - text-align: right; + inset-inline-end: 15px; + text-align: end; } } } @@ -1617,7 +1642,7 @@ a.sparkline { flex: 0 0 auto; width: 200px; padding: 15px; - padding-right: 0; + padding-inline-end: 0; .button { display: block; @@ -1703,7 +1728,7 @@ a.sparkline { &__rules { list-style: disc; - padding-left: 15px; + padding-inline-start: 15px; margin-bottom: 20px; color: $darker-text-color; @@ -1792,7 +1817,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; @@ -1802,7 +1827,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; @@ -1816,12 +1841,12 @@ a.sparkline { &::after { position: absolute; - content: ""; + content: ''; width: 1px; background: $highlight-text-color; bottom: 0; top: calc(1.875rem + 1px); - left: 0.6875rem; + inset-inline-start: 0.6875rem; } &:last-child { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 413a1cdd6..a344c7fa4 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -14,7 +14,7 @@ body { font-weight: 400; color: $primary-text-color; text-rendering: optimizelegibility; - font-feature-settings: "kern"; + font-feature-settings: 'kern'; text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); -webkit-tap-highlight-color: transparent; @@ -31,7 +31,9 @@ body { // Droid Sans => Older Androids (<4.0) // Helvetica Neue => Older macOS <10.11 // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + $font-sans-serif, sans-serif; } &.app-body { @@ -265,7 +267,7 @@ button { overflow: hidden; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: -1000; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d5937643f..862252781 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -309,7 +309,7 @@ &__counter { display: inline-block; width: auto; - margin-left: 4px; + margin-inline-start: 4px; font-size: 12px; font-weight: 500; } @@ -387,7 +387,7 @@ body > [data-popper-placement] { .ellipsis { &::after { - content: "…"; + content: '…'; } } @@ -404,11 +404,8 @@ body > [data-popper-placement] { color: $highlight-text-color; } - input[type="checkbox"] { - display: none; - } - - .checkbox { + input[type='checkbox'] { + appearance: none; display: inline-block; position: relative; border: 1px solid $ui-primary-color; @@ -416,14 +413,17 @@ body > [data-popper-placement] { width: 18px; height: 18px; flex: 0 0 auto; - margin-right: 10px; + margin-inline-end: 10px; top: -1px; border-radius: 4px; vertical-align: middle; + cursor: inherit; - &.active { + &:checked { border-color: $highlight-text-color; - background: $highlight-text-color; + background: $highlight-text-color + url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>") + center center no-repeat; } } } @@ -465,7 +465,7 @@ body > [data-popper-placement] { .emoji-picker-dropdown { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; } .compose-form__autosuggest-wrapper { @@ -527,7 +527,7 @@ body > [data-popper-placement] { min-height: 100px; border-radius: 4px 4px 0 0; padding-bottom: 0; - padding-right: 10px + 22px; + padding-right: 10px + 22px; // Cannot use inline-end because of dir=auto resize: none; scrollbar-color: initial; @@ -536,7 +536,7 @@ body > [data-popper-placement] { } @media screen and (max-width: 600px) { - height: 100px !important; // prevent auto-resize textarea + height: 100px !important; // Prevent auto-resize textarea resize: vertical; } } @@ -605,7 +605,7 @@ body > [data-popper-placement] { &__uses { flex: 0 0 auto; - text-align: right; + text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -615,7 +615,7 @@ body > [data-popper-placement] { .autosuggest-account-icon, .autosuggest-emoji img { display: block; - margin-right: 8px; + margin-inline-end: 8px; width: 16px; height: 16px; } @@ -647,7 +647,12 @@ body > [data-popper-placement] { margin: 5px; &__actions { - background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + background: linear-gradient( + 180deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); display: flex; align-items: flex-start; justify-content: space-between; @@ -672,10 +677,15 @@ body > [data-popper-placement] { position: absolute; z-index: 2; bottom: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + background: linear-gradient( + 0deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); } } @@ -727,7 +737,7 @@ body > [data-popper-placement] { .character-counter__wrapper { align-self: center; - margin-right: 4px; + margin-inline-end: 4px; } } @@ -826,13 +836,13 @@ body > [data-popper-placement] { max-width: 100%; line-height: 24px; overflow: hidden; - padding-right: 25px; + padding-inline-end: 25px; text-decoration: none; } .reply-indicator__display-avatar { float: left; - margin-right: 5px; + margin-inline-end: 5px; } .status__content--with-action { @@ -1080,8 +1090,13 @@ body > [data-popper-placement] { cursor: auto; @keyframes fade { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } } opacity: 1; @@ -1183,11 +1198,12 @@ body > [data-popper-placement] { .status__info { font-size: 15px; - margin-bottom: 10px; + padding-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; + cursor: pointer; } .status-check-box__status { @@ -1228,7 +1244,7 @@ body > [data-popper-placement] { .status__prepend { padding: 16px; padding-bottom: 0; - display: flex; + display: inline-flex; gap: 10px; font-size: 15px; line-height: 22px; @@ -1246,6 +1262,18 @@ body > [data-popper-placement] { } } +.status__wrapper-direct { + background: mix($ui-base-color, $ui-highlight-color, 95%); + + &:focus { + background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + } + + .status__prepend { + color: $highlight-text-color; + } +} + .status__action-bar { display: flex; justify-content: space-between; @@ -1299,6 +1327,11 @@ body > [data-popper-placement] { .audio-player { margin-top: 16px; } + + .status__prepend { + padding: 0; + margin-bottom: 16px; + } } .detailed-status__meta { @@ -1317,6 +1350,32 @@ body > [data-popper-placement] { padding: 10px 0; } +.detailed-status__wrapper-direct { + .detailed-status, + .detailed-status__action-bar { + background: mix($ui-base-color, $ui-highlight-color, 95%); + } + + &:focus { + .detailed-status, + .detailed-status__action-bar { + background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + } + } + + .detailed-status__action-bar { + border-top-color: mix( + lighten($ui-base-color, 8%), + $ui-highlight-color, + 95% + ); + } + + .status__prepend { + color: $highlight-text-color; + } +} + .detailed-status__link { color: inherit; text-decoration: none; @@ -1328,7 +1387,7 @@ body > [data-popper-placement] { font-weight: 500; font-size: 12px; line-height: 17px; - margin-left: 6px; + margin-inline-start: 6px; } .reply-indicator__content { @@ -1368,15 +1427,6 @@ body > [data-popper-placement] { padding: 16px; border-bottom: 1px solid lighten($ui-base-color, 8%); - &.compact { - padding: 0; - border-bottom: 0; - - .account__avatar-wrapper { - margin-left: 0; - } - } - .account__display-name { flex: 1 1 auto; display: flex; @@ -1387,9 +1437,23 @@ body > [data-popper-placement] { text-decoration: none; font-size: 14px; - &--with-note { - strong { - display: inline; + .display-name { + margin-bottom: 4px; + } + + .display-name strong { + display: inline; + } + } + + &--minimal { + .account__display-name { + .display-name { + margin-bottom: 0; + } + + .display-name strong { + display: block; } } } @@ -1434,7 +1498,7 @@ body > [data-popper-placement] { &-inline { display: inline-block; vertical-align: middle; - margin-right: 5px; + margin-inline-end: 5px; } &-composite { @@ -1457,7 +1521,7 @@ body > [data-popper-placement] { display: block; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); color: $primary-text-color; text-shadow: 1px 1px 2px $base-shadow-color; @@ -1477,7 +1541,7 @@ a .account__avatar { &-overlay { position: absolute; bottom: 0; - right: 0; + inset-inline-end: 0; z-index: 1; } } @@ -1534,15 +1598,15 @@ a .account__avatar { .dropdown--active { .dropdown__content.dropdown__right { - left: 6px; - right: initial; + inset-inline-start: 6px; + inset-inline-end: initial; } &::after { bottom: initial; - margin-left: 11px; + margin-inline-start: 11px; margin-top: -7px; - right: initial; + inset-inline-end: initial; } } } @@ -1558,7 +1622,7 @@ a .account__avatar { text-decoration: none; overflow: hidden; flex: 0 1 100%; - border-right: 1px solid lighten($ui-base-color, 8%); + border-inline-end: 1px solid lighten($ui-base-color, 8%); padding: 10px 0; border-bottom: 4px solid transparent; @@ -1599,7 +1663,7 @@ a .account__avatar { .account-authorize__avatar { float: left; - margin-right: 10px; + margin-inline-end: 10px; } .status__display-name, @@ -1613,7 +1677,7 @@ a .account__avatar { .status__display-name, .account__display-name { - strong { + .display-name strong { color: $primary-text-color; } } @@ -1628,12 +1692,12 @@ a .account__avatar { .reply-indicator__display-name, .detailed-status__display-name, a.account__display-name { - &:hover strong { + &:hover .display-name strong { text-decoration: underline; } } -.account__display-name strong { +.account__display-name .display-name strong { display: block; overflow: hidden; text-overflow: ellipsis; @@ -1827,11 +1891,11 @@ a.account__display-name { justify-content: center; flex-direction: column; scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ + -ms-overflow-style: none; /* IE 10+ */ * { scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ + -ms-overflow-style: none; /* IE 10+ */ } &::-webkit-scrollbar, @@ -2071,7 +2135,7 @@ a.account__display-name { } &.right { - left: -9px; + inset-inline-start: -9px; &::before { transform: rotate(-90deg); @@ -2083,7 +2147,7 @@ a.account__display-name { } &.left { - right: -9px; + inset-inline-end: -9px; &::before { transform: rotate(90deg); @@ -2153,7 +2217,7 @@ a.account__display-name { vertical-align: top; .account__avatar { - margin-right: 5px; + margin-inline-end: 5px; border-radius: 50%; } @@ -2166,8 +2230,8 @@ a.account__display-name { display: block; line-height: 18px; max-width: 311px; - right: 0; - text-align: left; + inset-inline-end: 0; + text-align: start; z-index: 9999; & > ul { @@ -2181,12 +2245,12 @@ a.account__display-name { } &.dropdown__right { - right: 0; + inset-inline-end: 0; } &.dropdown__left { & > ul { - left: -98px; + inset-inline-start: -98px; } } @@ -2405,23 +2469,23 @@ $ui-header-height: 55px; .drawer { flex: 0 0 auto; padding: 10px; - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; &:first-child { - padding-left: 10px; + padding-inline-start: 10px; } &:last-child { - padding-right: 10px; + padding-inline-end: 10px; } } .columns-area > div { .column, .drawer { - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; } } } @@ -2468,7 +2532,7 @@ $ui-header-height: 55px; } span { - margin-left: 5px; + margin-inline-start: 5px; display: none; } } @@ -2510,7 +2574,7 @@ $ui-header-height: 55px; line-height: 18px; font-size: 16px; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; } .search__icon .fa { @@ -2578,7 +2642,7 @@ $ui-header-height: 55px; .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; } @@ -2650,7 +2714,7 @@ $ui-header-height: 55px; &__badge { position: absolute; - left: 9px; + inset-inline-start: 9px; top: -13px; background: $ui-highlight-color; border: 2px solid lighten($ui-base-color, 8%); @@ -2664,7 +2728,7 @@ $ui-header-height: 55px; &__issue-badge { position: absolute; - left: 11px; + inset-inline-start: 11px; bottom: 1px; display: block; background: $error-red; @@ -2720,7 +2784,7 @@ $ui-header-height: 55px; &__background { position: absolute; - left: 0; + inset-inline-start: 0; bottom: 0; height: 220px; width: auto; @@ -2846,7 +2910,7 @@ $ui-header-height: 55px; .drawer__inner { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; background: lighten($ui-base-color, 13%); box-sizing: border-box; padding: 0; @@ -2863,7 +2927,9 @@ $ui-header-height: 55px; } .drawer__inner__mastodon { - background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto; + background: lighten($ui-base-color, 13%) + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') + no-repeat bottom / 100% auto; flex: 1; min-height: 47px; display: none; @@ -2875,7 +2941,6 @@ $ui-header-height: 55px; width: 85%; height: 100%; pointer-events: none; - user-drag: none; user-select: none; } @@ -2887,7 +2952,7 @@ $ui-header-height: 55px; .pseudo-drawer { background: lighten($ui-base-color, 13%); font-size: 13px; - text-align: left; + text-align: start; } .drawer__header { @@ -2897,6 +2962,8 @@ $ui-header-height: 55px; margin-bottom: 10px; display: flex; flex-direction: row; + border-radius: 4px; + overflow: hidden; a { transition: background 100ms ease-in; @@ -2918,7 +2985,8 @@ $ui-header-height: 55px; overflow-y: auto; } - @supports (display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: strict; } @@ -2939,7 +3007,8 @@ $ui-header-height: 55px; } .scrollable.fullscreen { - @supports (display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: none; } } @@ -2988,7 +3057,7 @@ $ui-header-height: 55px; .column-back-button__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-back-button--slim { @@ -3001,7 +3070,7 @@ $ui-header-height: 55px; font-size: 16px; padding: 15px; position: absolute; - right: 0; + inset-inline-end: 0; top: -48px; } @@ -3043,7 +3112,8 @@ $ui-header-height: 55px; transition: background-color 0.2s ease; } -.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { +.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { background-color: darken($ui-base-color, 10%); } @@ -3051,7 +3121,8 @@ $ui-header-height: 55px; background-color: darken($ui-highlight-color, 2%); } -.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { +.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { background-color: $ui-highlight-color; } @@ -3064,7 +3135,7 @@ $ui-header-height: 55px; margin-top: auto; margin-bottom: auto; line-height: 0; - left: 8px; + inset-inline-start: 8px; opacity: 0; transition: opacity 0.25s ease; } @@ -3083,7 +3154,7 @@ $ui-header-height: 55px; margin-top: auto; margin-bottom: auto; line-height: 0; - right: 10px; + inset-inline-end: 10px; opacity: 1; transition: opacity 0.25s ease; } @@ -3095,7 +3166,7 @@ $ui-header-height: 55px; .react-toggle-thumb { position: absolute; top: 1px; - left: 1px; + inset-inline-start: 1px; width: 22px; height: 22px; border: 1px solid $ui-base-color; @@ -3107,7 +3178,7 @@ $ui-header-height: 55px; } .react-toggle--checked .react-toggle-thumb { - left: 27px; + inset-inline-start: 27px; border-color: $ui-highlight-color; } @@ -3161,7 +3232,7 @@ $ui-header-height: 55px; .column-link__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-link__badge { @@ -3255,7 +3326,7 @@ $ui-header-height: 55px; thead { position: absolute; - left: -9999px; + inset-inline-start: -9999px; } td { @@ -3359,9 +3430,9 @@ button.icon-button.active i.fa-retweet { &__actions { bottom: 0; - left: 0; + inset-inline-start: 0; position: absolute; - right: 0; + inset-inline-end: 0; top: 0; display: flex; justify-content: center; @@ -3467,7 +3538,7 @@ a.status-card { position: absolute; transform-origin: 50% 50%; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); } } @@ -3534,7 +3605,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; @@ -3646,17 +3717,21 @@ a.status-card.compact:hover { &::before { display: block; - content: ""; + 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; height: 28px; z-index: 1; - background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); + background: radial-gradient( + ellipse, + rgba($ui-highlight-color, 0.23) 0%, + rgba($ui-highlight-color, 0) 60% + ); } } @@ -3681,11 +3756,12 @@ a.status-card.compact:hover { & > button { margin: 0; border: 0; - padding: 15px 0 15px 15px; + padding: 15px; + padding-inline-end: 0; color: inherit; background: transparent; font: inherit; - text-align: left; + text-align: start; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -3719,7 +3795,7 @@ a.status-card.compact:hover { } .column-header__links .text-btn { - margin-right: 10px; + margin-inline-end: 10px; } .column-header__button { @@ -3808,12 +3884,12 @@ a.status-card.compact:hover { 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; } } } @@ -3840,7 +3916,7 @@ a.status-card.compact:hover { .column-header__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .loading-indicator { @@ -3851,7 +3927,7 @@ a.status-card.compact:hover { overflow: visible; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; @@ -3987,7 +4063,7 @@ a.status-card.compact:hover { .spoiler-button { top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; position: absolute; @@ -3995,7 +4071,7 @@ a.status-card.compact:hover { &--minified { display: block; - left: 4px; + inset-inline-start: 4px; top: 4px; width: auto; height: auto; @@ -4112,12 +4188,12 @@ a.status-card.compact:hover { &__placeholder { color: $dark-text-color; - padding-left: 2px; + padding-inline-start: 2px; font-size: 12px; } &__value-container { - padding-left: 6px; + padding-inline-start: 6px; } &__multi-value { @@ -4214,7 +4290,7 @@ a.status-card.compact:hover { color: $darker-text-color; display: inline-block; margin-bottom: 14px; - margin-left: 8px; + margin-inline-start: 8px; vertical-align: middle; } @@ -4241,7 +4317,8 @@ a.status-card.compact:hover { align-items: center; justify-content: center; - @supports (display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: strict; } @@ -4262,6 +4339,7 @@ a.status-card.compact:hover { .follow_requests-unlocked_explanation { background: darken($ui-base-color, 4%); contain: initial; + flex-grow: 0; } .error-column { @@ -4398,7 +4476,7 @@ a.status-card.compact:hover { .emoji-picker-dropdown__modifiers { position: absolute; top: 60px; - right: 11px; + inset-inline-end: 11px; cursor: pointer; } @@ -4406,7 +4484,7 @@ a.status-card.compact:hover { position: absolute; z-index: 4; top: -4px; - left: -8px; + inset-inline-start: -8px; background: $simple-background-color; border-radius: 4px; box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -4441,14 +4519,14 @@ a.status-card.compact:hover { align-items: center; background: rgba($base-overlay-background, 0.8); display: flex; - height: 100%; + height: 100vh; justify-content: center; - left: 0; + inset-inline-start: 0; opacity: 0; - position: absolute; + position: fixed; top: 0; visibility: hidden; - width: 100%; + width: 100vw; z-index: 2000; * { @@ -4468,9 +4546,9 @@ a.status-card.compact:hover { .upload-area__background { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 0; - left: 0; + inset-inline-start: 0; z-index: -1; border-radius: 4px; background: $ui-base-color; @@ -4482,6 +4560,7 @@ a.status-card.compact:hover { display: flex; align-items: center; justify-content: center; + text-align: center; color: $secondary-text-color; font-size: 18px; font-weight: 500; @@ -4497,7 +4576,7 @@ a.status-card.compact:hover { .fa { font-size: 34px; - margin-right: 10px; + margin-inline-end: 10px; } span { @@ -4516,14 +4595,14 @@ a.status-card.compact:hover { width: 100%; height: 6px; border-radius: 6px; - background: $ui-base-lighter-color; + background: darken($simple-background-color, 8%); position: relative; margin-top: 5px; } .upload-progress__tracker { position: absolute; - left: 0; + inset-inline-start: 0; top: 0; height: 6px; background: $ui-highlight-color; @@ -4532,7 +4611,10 @@ a.status-card.compact:hover { .emoji-button { display: block; - padding: 5px 5px 2px 2px; + padding-top: 5px; + padding-bottom: 2px; + padding-inline-start: 2px; + padding-inline-end: 5px; outline: 0; cursor: pointer; @@ -4620,7 +4702,7 @@ a.status-card.compact:hover { display: flex; align-items: center; justify-content: center; - margin-right: 10px; + margin-inline-end: 10px; } .privacy-dropdown__option__content { @@ -4686,11 +4768,11 @@ a.status-card.compact:hover { } .emoji-mart-search { - padding-right: 10px; + padding-inline-end: 10px; } .emoji-mart-search-icon { - right: 10px + 5px; + inset-inline-end: 10px + 5px; } .emoji-mart-scroll { @@ -4736,6 +4818,86 @@ a.status-card.compact:hover { .search { margin-bottom: 10px; position: relative; + + &__popout { + box-sizing: border-box; + display: none; + position: absolute; + inset-inline-start: 0; + margin-top: -2px; + width: 100%; + background: $ui-base-color; + border-radius: 0 0 4px 4px; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + z-index: 2; + font-size: 13px; + padding: 15px 5px; + + h4 { + text-transform: uppercase; + color: $dark-text-color; + font-weight: 500; + padding: 0 10px; + margin-bottom: 10px; + } + + &__menu { + &__message { + color: $dark-text-color; + padding: 0 10px; + } + + &__item { + display: block; + box-sizing: border-box; + width: 100%; + border: 0; + font: inherit; + background: transparent; + color: $darker-text-color; + padding: 10px; + cursor: pointer; + border-radius: 4px; + text-align: start; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + &--flex { + display: flex; + justify-content: space-between; + } + + .icon-button { + transition: none; + } + + &:hover, + &:focus, + &:active, + &.selected { + background: $ui-highlight-color; + color: $primary-text-color; + + .icon-button { + color: $primary-text-color; + } + } + + mark { + background: transparent; + font-weight: 700; + color: $primary-text-color; + } + } + } + } + + &.active { + .search__popout { + display: block; + } + } } .search__input { @@ -4743,7 +4905,7 @@ a.status-card.compact:hover { display: block; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; line-height: 18px; font-size: 16px; @@ -4779,7 +4941,7 @@ a.status-card.compact:hover { .fa { position: absolute; top: 16px; - right: 10px; + inset-inline-end: 10px; z-index: 2; display: inline-block; opacity: 0; @@ -4833,7 +4995,7 @@ a.status-card.compact:hover { .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -4852,7 +5014,7 @@ a.status-card.compact:hover { .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -4890,8 +5052,8 @@ a.status-card.compact:hover { .modal-root__overlay { position: fixed; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; background: rgba($base-overlay-background, 0.7); transition: background 0.5s; @@ -4900,7 +5062,7 @@ a.status-card.compact:hover { .modal-root__container { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; @@ -4953,16 +5115,16 @@ a.status-card.compact:hover { .media-modal__closer { position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; } .media-modal__navigation { position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; pointer-events: none; transition: opacity 0.3s linear; @@ -5005,18 +5167,18 @@ a.status-card.compact:hover { } .media-modal__nav--left { - left: 0; + inset-inline-start: 0; } .media-modal__nav--right { - right: 0; + inset-inline-end: 0; } .media-modal__overlay { max-width: 600px; position: absolute; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; margin: 0 auto; @@ -5103,14 +5265,14 @@ a.status-card.compact:hover { .media-modal__close { position: absolute; - right: 8px; + inset-inline-end: 8px; top: 8px; z-index: 100; } .media-modal__zoom-button { position: absolute; - right: 64px; + inset-inline-end: 64px; top: 8px; z-index: 100; pointer-events: auto; @@ -5144,7 +5306,7 @@ a.status-card.compact:hover { & > div { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; @@ -5240,7 +5402,7 @@ a.status-card.compact:hover { display: inline-block; max-width: 30px; max-height: auto; - margin-left: 10px; + margin-inline-start: 10px; } .boost-modal, @@ -5295,9 +5457,9 @@ a.status-card.compact:hover { & > div { flex: 1 1 auto; - text-align: right; + text-align: end; color: $lighter-text-color; - padding-right: 10px; + padding-inline-end: 10px; } .button { @@ -5500,7 +5662,7 @@ a.status-card.compact:hover { & > span { font-size: 17px; font-weight: 500; - margin-left: 10px; + margin-inline-start: 10px; } } @@ -5524,11 +5686,11 @@ a.status-card.compact:hover { } .emoji-mart-search { - padding-right: 10px; + padding-inline-end: 10px; } .emoji-mart-search-icon { - right: 10px + 5px; + inset-inline-end: 10px + 5px; } } @@ -5591,7 +5753,7 @@ a.status-card.compact:hover { .report-modal__comment { padding: 20px; - border-right: 1px solid $ui-secondary-color; + border-inline-end: 1px solid $ui-secondary-color; max-width: 320px; p { @@ -5689,7 +5851,7 @@ a.status-card.compact:hover { } button:first-child { - margin-right: 10px; + margin-inline-end: 10px; } } } @@ -5747,11 +5909,13 @@ a.status-card.compact:hover { width: auto; outline: 0; font-family: inherit; - background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") + no-repeat right 8px center / auto 16px; border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; - padding-right: 30px; + padding-inline-end: 30px; } } @@ -5775,7 +5939,7 @@ a.status-card.compact:hover { &__label { color: $inverted-text-color; margin: 0; - margin-left: 8px; + margin-inline-start: 8px; } } } @@ -5786,7 +5950,7 @@ a.status-card.compact:hover { .report-modal__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } } @@ -5798,6 +5962,7 @@ a.status-card.compact:hover { &__container { padding: 30px; pointer-events: all; + overflow-y: auto; } .status__content { @@ -5836,7 +6001,7 @@ a.status-card.compact:hover { height: 3px; position: fixed; top: 0; - left: 0; + inset-inline-start: 0; z-index: 9999; } @@ -5846,7 +6011,7 @@ a.status-card.compact:hover { color: $primary-text-color; background: rgba($base-overlay-background, 0.5); bottom: 6px; - left: 6px; + inset-inline-start: 6px; padding: 2px 6px; border-radius: 2px; font-size: 11px; @@ -5879,7 +6044,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; @@ -5894,7 +6059,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; @@ -5982,7 +6147,7 @@ a.status-card.compact:hover { object-fit: cover; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; background: $base-overlay-background; @@ -6150,10 +6315,15 @@ a.status-card.compact:hover { position: absolute; z-index: 2; bottom: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); + background: linear-gradient( + 0deg, + rgba($base-shadow-color, 0.85) 0, + rgba($base-shadow-color, 0.45) 60%, + transparent + ); padding: 0 15px; opacity: 0; transition: opacity 0.1s ease; @@ -6174,7 +6344,7 @@ a.status-card.compact:hover { display: none; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; z-index: 4; @@ -6290,18 +6460,18 @@ a.status-card.compact:hover { &.active { overflow: visible; width: 50px; - margin-right: 16px; + margin-inline-end: 16px; } &::before { - content: ""; + content: ''; width: 50px; background: rgba($white, 0.35); border-radius: 4px; display: block; position: absolute; height: 4px; - left: 0; + inset-inline-start: 0; top: 50%; transform: translate(0, -50%); } @@ -6311,7 +6481,7 @@ a.status-card.compact:hover { position: absolute; height: 4px; border-radius: 4px; - left: 0; + inset-inline-start: 0; top: 50%; transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); @@ -6324,8 +6494,8 @@ a.status-card.compact:hover { width: 12px; height: 12px; top: 50%; - left: 0; - margin-left: -6px; + inset-inline-start: 0; + margin-inline-start: -6px; transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -6364,7 +6534,7 @@ a.status-card.compact:hover { position: relative; &::before { - content: ""; + content: ''; width: 100%; background: rgba($white, 0.35); border-radius: 4px; @@ -6396,7 +6566,7 @@ a.status-card.compact:hover { width: 12px; height: 12px; top: 10px; - margin-left: -6px; + margin-inline-start: -6px; background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -6447,7 +6617,11 @@ a.status-card.compact:hover { } .scrollable .account-card__bio::after { - background: linear-gradient(to left, lighten($ui-base-color, 8%), transparent); + background: linear-gradient( + to left, + lighten($ui-base-color, 8%), + transparent + ); } .account-gallery__container { @@ -6468,7 +6642,7 @@ a.status-card.compact:hover { &__icons { position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); font-size: 24px; } @@ -6508,10 +6682,10 @@ a.status-card.compact:hover { &::before, &::after { display: block; - content: ""; + content: ''; position: absolute; bottom: 0; - left: 50%; + inset-inline-start: 50%; width: 0; height: 0; transform: translateX(-50%); @@ -6574,8 +6748,8 @@ a.status-card.compact:hover { text-overflow: ellipsis; cursor: pointer; - input[type="radio"], - input[type="checkbox"] { + input[type='radio'], + input[type='checkbox'] { display: none; } @@ -6587,7 +6761,7 @@ a.status-card.compact:hover { width: 18px; height: 18px; flex: 0 0 auto; - margin-right: 10px; + margin-inline-end: 10px; top: -1px; border-radius: 50%; vertical-align: middle; @@ -6603,10 +6777,6 @@ a.status-card.compact:hover { border-radius: 0; } -.search-popout { - @include search-popout; -} - noscript { text-align: center; @@ -6634,9 +6804,17 @@ noscript { } @keyframes flicker { - 0% { opacity: 1; } - 30% { opacity: 0.75; } - 100% { opacity: 1; } + 0% { + opacity: 1; + } + + 30% { + opacity: 0.75; + } + + 100% { + opacity: 1; + } } @media screen and (max-width: 630px) and (max-height: 400px) { @@ -6656,8 +6834,10 @@ noscript { .navigation-bar { & > a:first-child { - will-change: margin-top, margin-left, margin-right, width; - transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay); + will-change: margin-top, margin-inline-start, margin-inline-end, width; + transition: margin-top $duration $delay, + margin-inline-start $duration ($duration + $delay), + margin-inline-end $duration ($duration + $delay); } & > .navigation-bar__profile-edit { @@ -6668,15 +6848,12 @@ noscript { .navigation-bar__actions { & > .icon-button.close { will-change: opacity transform; - transition: - opacity $duration * 0.5 $delay, - transform $duration $delay; + transition: opacity $duration * 0.5 $delay, transform $duration $delay; } & > .compose__action-bar .icon-button { will-change: opacity transform; - transition: - opacity $duration * 0.5 $delay + $duration * 0.5, + transition: opacity $duration * 0.5 $delay + $duration * 0.5, transform $duration $delay; } } @@ -6842,7 +7019,7 @@ noscript { cursor: pointer; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background: rgba($base-overlay-background, 0.5); @@ -6871,6 +7048,7 @@ noscript { .drawer__pager { height: 50vh; + border-radius: 4px; } .drawer__inner { @@ -6980,13 +7158,13 @@ noscript { width: 100%; height: 100%; top: 0; - left: 0; + inset-inline-start: 0; } &__preview { position: absolute; bottom: 10px; - right: 10px; + inset-inline-end: 10px; z-index: 2; cursor: move; transition: opacity 0.1s ease; @@ -7063,7 +7241,7 @@ noscript { &__info { position: absolute; top: 10px; - left: 10px; + inset-inline-start: 10px; } &__image { @@ -7106,7 +7284,7 @@ noscript { padding-top: 10px; gap: 8px; overflow: hidden; - margin-left: -2px; // aligns the pfp with content below + margin-inline-start: -2px; // aligns the pfp with content below &__buttons { display: flex; @@ -7309,6 +7487,19 @@ noscript { } } +.verified-badge { + display: inline-flex; + align-items: center; + color: $valid-value-color; + gap: 4px; + + a { + color: inherit; + font-weight: 500; + text-decoration: none; + } +} + .trends { &__header { color: $dark-text-color; @@ -7321,7 +7512,7 @@ noscript { .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -7371,7 +7562,7 @@ noscript { flex: 0 0 auto; font-size: 24px; font-weight: 500; - text-align: right; + text-align: end; color: $secondary-text-color; text-decoration: none; } @@ -7476,7 +7667,7 @@ noscript { &__content { flex: 1 1 auto; padding: 10px 5px; - padding-right: 15px; + padding-inline-end: 15px; overflow: hidden; &__info { @@ -7489,7 +7680,7 @@ noscript { &__relative-time { font-size: 15px; color: $darker-text-color; - padding-left: 15px; + padding-inline-start: 15px; } &__names { @@ -7579,13 +7770,13 @@ noscript { display: block; font-weight: 500; margin-bottom: 10px; - padding-right: 18px; + padding-inline-end: 18px; } &__unread { position: absolute; top: 19px; - right: 19px; + inset-inline-end: 19px; display: block; background: $highlight-text-color; border-radius: 50%; @@ -7599,7 +7790,7 @@ noscript { color: $darker-text-color; position: absolute; bottom: 3px; - right: 0; + inset-inline-end: 0; } } @@ -7616,7 +7807,7 @@ noscript { flex-wrap: wrap; align-items: center; margin-top: 15px; - margin-left: -2px; + margin-inline-start: -2px; width: calc(100% - (90px - 33px)); &__item { @@ -7657,7 +7848,7 @@ noscript { font-size: 13px; font-weight: 500; text-align: center; - margin-left: 6px; + margin-inline-start: 6px; color: $darker-text-color; } @@ -7676,7 +7867,11 @@ noscript { &.active { transition: all 100ms ease-in; transition-property: background-color, color; - background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%); + background-color: mix( + lighten($ui-base-color, 12%), + $ui-highlight-color, + 80% + ); .reactions-bar__item__count { color: lighten($highlight-text-color, 8%); @@ -7729,13 +7924,13 @@ noscript { &.unread { &::before { - content: ""; + 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; } } @@ -7744,7 +7939,7 @@ noscript { .picture-in-picture { position: fixed; bottom: 20px; - right: 20px; + inset-inline-end: 20px; width: 300px; &__footer { @@ -7770,7 +7965,7 @@ noscript { } .account__avatar { - margin-right: 10px; + margin-inline-end: 10px; } .display-name { @@ -7836,7 +8031,7 @@ noscript { &__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } h2 { @@ -7869,9 +8064,13 @@ noscript { padding: 10px; } + .search__popout { + border: 1px solid lighten($ui-base-color, 8%); + } + .search .fa { top: 10px; - right: 10px; + inset-inline-end: 10px; color: $dark-text-color; } @@ -7955,7 +8154,7 @@ noscript { object-fit: fill; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; &--hidden { @@ -8041,7 +8240,7 @@ noscript { } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .spacer { @@ -8198,11 +8397,13 @@ noscript { img { margin-top: 2em; margin-bottom: 2em; + max-width: 100%; } video { margin-top: 2em; margin-bottom: 2em; + max-width: 100%; } figure { @@ -8257,27 +8458,27 @@ noscript { counter-increment: list-counter; &::before { - content: counter(list-counter) "."; + content: counter(list-counter) '.'; position: absolute; - left: 0; + inset-inline-start: 0; } } ul > li::before { - content: ""; + content: ''; position: absolute; background-color: $darker-text-color; border-radius: 50%; 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 { @@ -8410,7 +8611,7 @@ noscript { &__preview { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; object-fit: cover; @@ -8616,7 +8817,7 @@ noscript { } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .account__relationship { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index b49b93984..fb71ad034 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -18,7 +18,7 @@ .logo { height: 42px; - margin-right: 10px; + margin-inline-end: 10px; } a { @@ -73,7 +73,7 @@ .avatar { width: 40px; height: 40px; - margin-right: 10px; + margin-inline-end: 10px; img { width: 100%; @@ -101,6 +101,6 @@ display: block; font-size: 32px; line-height: 40px; - margin-left: 10px; + margin-inline-start: 10px; } } diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 1042ddda8..c7247c3a5 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -71,7 +71,7 @@ .emoji-mart-anchor-bar { position: absolute; bottom: -5px; - left: 0; + inset-inline-start: 0; width: 100%; height: 4px; background-color: $highlight-text-color; @@ -106,7 +106,7 @@ .emoji-mart-search { padding: 10px; - padding-right: 45px; + padding-inline-end: 45px; background: $simple-background-color; position: relative; @@ -114,7 +114,7 @@ font-size: 16px; font-weight: 400; padding: 7px 9px; - padding-right: 25px; + padding-inline-end: 25px; font-family: inherit; display: block; width: 100%; @@ -142,7 +142,7 @@ .emoji-mart-search-icon { position: absolute; top: 18px; - right: 45px + 5px; + inset-inline-end: 45px + 5px; z-index: 2; padding: 2px 5px 1px; border: 0; @@ -174,10 +174,10 @@ &:hover::before { z-index: -1; - content: ""; + content: ''; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background-color: rgba($ui-secondary-color, 0.7); diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 0d5cdf382..129a836f3 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -54,12 +54,12 @@ code { .radio > label { position: relative; - padding-left: 28px; + padding-inline-start: 28px; input { position: absolute; top: -2px; - left: 0; + inset-inline-start: 0; } } } @@ -79,7 +79,7 @@ code { .label_input, .hint { - padding-left: 28px; + padding-inline-start: 28px; } .label_input__wrapper { @@ -89,7 +89,7 @@ code { label.checkbox { position: absolute; top: 2px; - left: 0; + inset-inline-start: 0; } label a { @@ -152,7 +152,7 @@ code { li { list-style: disc; - margin-left: 18px; + margin-inline-start: 18px; } } @@ -218,7 +218,7 @@ code { &.select .hint { margin-top: 6px; - margin-left: 150px; + margin-inline-start: 150px; } } @@ -292,7 +292,7 @@ code { max-width: 100%; height: auto; border-radius: 4px; - background: url("images/void.png"); + background: url('images/void.png'); &:last-child { margin-bottom: 0; @@ -373,13 +373,13 @@ code { width: auto; position: relative; padding-top: 5px; - padding-left: 25px; + padding-inline-start: 25px; flex: 1 1 auto; } - input[type="checkbox"] { + input[type='checkbox'] { position: absolute; - left: 0; + inset-inline-start: 0; top: 5px; margin: 0; } @@ -393,12 +393,12 @@ code { border-radius: 4px; } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="url"], - input[type="datetime-local"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='url'], + input[type='datetime-local'], textarea { box-sizing: border-box; font-size: 16px; @@ -436,11 +436,11 @@ code { } } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="datetime-local"] { + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='datetime-local'] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { border-color: lighten($error-red, 12%); @@ -452,11 +452,11 @@ code { color: lighten($error-red, 12%); } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="datetime-local"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='datetime-local'], textarea, select { border-color: lighten($error-red, 12%); @@ -510,10 +510,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, @@ -560,11 +560,13 @@ code { outline: 0; font-family: inherit; resize: vertical; - background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px; + background: darken($ui-base-color, 10%) + url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") + 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; } @@ -579,7 +581,7 @@ code { &__append { position: absolute; - right: 3px; + inset-inline-end: 3px; top: 1px; padding: 10px; padding-bottom: 9px; @@ -597,10 +599,14 @@ code { display: block; position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 1px; width: 5px; - background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); + background-image: linear-gradient( + to right, + rgba(darken($ui-base-color, 10%), 0), + darken($ui-base-color, 10%) + ); } } } @@ -767,7 +773,7 @@ code { li { display: inline-block; - margin-right: 10px; + margin-inline-end: 10px; } a { @@ -926,7 +932,7 @@ code { .actions { padding: 30px 0; - padding-right: 20px; + padding-inline-end: 20px; flex: 0 0 auto; } } @@ -979,7 +985,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; @@ -988,7 +994,7 @@ code { flex: 1 1 auto; } - input[type="text"] { + input[type='text'] { background: transparent; border: 0; padding: 10px; diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index a333926dd..29b1f162b 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -1,5 +1,7 @@ .modal-layout { - background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>') repeat-x bottom fixed; + background: $ui-base-color + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>') + repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; @@ -23,7 +25,7 @@ height: 100%; position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; } } } diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index 6812d5462..bdb87d7cf 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -64,8 +64,8 @@ max-width: calc(100% - 45px - 25px); } - input[type="radio"], - input[type="checkbox"] { + input[type='radio'], + input[type='checkbox'] { display: none; } @@ -73,7 +73,7 @@ flex: 1 1 auto; } - input[type="text"] { + input[type='text'] { display: block; box-sizing: border-box; width: 100%; @@ -109,7 +109,7 @@ box-sizing: border-box; width: 18px; height: 18px; - margin-right: 10px; + margin-inline-end: 10px; top: -1px; border-radius: 50%; vertical-align: middle; @@ -204,7 +204,7 @@ .button { height: 36px; padding: 0 16px; - margin-right: 10px; + margin-inline-end: 10px; font-size: 14px; } } @@ -240,7 +240,7 @@ line-height: inherit; color: $action-button-color; border-color: $action-button-color; - margin-right: 5px; + margin-inline-end: 5px; } li { @@ -250,7 +250,7 @@ .poll__option { flex: 0 0 auto; width: calc(100% - (23px + 6px)); - margin-right: 6px; + margin-inline-end: 6px; } } @@ -263,11 +263,13 @@ width: auto; outline: 0; font-family: inherit; - background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") + no-repeat right 8px center / auto 16px; border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; - padding-right: 30px; + padding-inline-end: 30px; } .icon-button.disabled { diff --git a/app/javascript/styles/mastodon/rich_text.scss b/app/javascript/styles/mastodon/rich_text.scss new file mode 100644 index 000000000..c77c23bc4 --- /dev/null +++ b/app/javascript/styles/mastodon/rich_text.scss @@ -0,0 +1,64 @@ +.status__content__text, +.e-content, +.reply-indicator__content { + pre, + blockquote { + margin-bottom: 20px; + white-space: pre-wrap; + unicode-bidi: plaintext; + + &:last-child { + margin-bottom: 0; + } + } + + blockquote { + padding-inline-start: 10px; + border-inline-start: 3px solid $darker-text-color; + color: $darker-text-color; + white-space: normal; + + p:last-child { + margin-bottom: 0; + } + } + + & > ul, + & > ol { + margin-bottom: 20px; + } + + b, + strong { + font-weight: 700; + } + + em, + i { + font-style: italic; + } + + ul, + ol { + margin-inline-start: 2em; + + p { + margin: 0; + } + } + + ul { + list-style-type: disc; + } + + ol { + list-style-type: decimal; + } +} + +.reply-indicator__content { + blockquote { + border-left-color: $inverted-text-color; + color: $inverted-text-color; + } +} diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index ccec8e95e..8d3d32665 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -1,398 +1,61 @@ body.rtl { direction: rtl; - .column-header > button { - text-align: right; - padding-left: 0; - padding-right: 15px; - } - - .radio-button__input { - margin-right: 0; - margin-left: 10px; - } - - .display-name, - .announcements__item { - text-align: right; - } - - .announcements__item__range { - padding-right: 0; - padding-left: 18px; - } - .reactions-bar { - margin-left: auto; - margin-right: -2px; direction: rtl; } - .reactions-bar__item__count { - margin-left: 0; - margin-right: 6px; - } - - .announcements__pagination { - right: auto; - left: 0; - } - - .notification__message { - margin-left: 0; - margin-right: 68px; - } - .announcements__mastodon, .drawer__inner__mastodon > img { transform: scaleX(-1); } - .notification__favourite-icon-wrapper { - left: auto; - right: -26px; - } - - .column-link__icon, - .column-header__icon { - margin-right: 0; - margin-left: 5px; - } - - .compose-form .compose-form__buttons-wrapper .character-counter__wrapper { - margin-right: 0; - margin-left: 4px; - } - - .navigation-bar__profile { - margin-left: 0; - margin-right: 8px; - } - - .search__input { + .compose-form .autosuggest-textarea__textarea { padding-right: 10px; - padding-left: 30px; - } - - .search__icon .fa { - right: auto; - left: 10px; + padding-left: 10px + 22px; } .columns-area { direction: rtl; } - .column-header__buttons { - left: 0; - right: auto; - margin-left: 0; - margin-right: -15px; - } - - .column-inline-form .icon-button { - margin-left: 0; - margin-right: 5px; - } - - .column-header__links .text-btn { - margin-left: 10px; - margin-right: 0; - } - .account__avatar-wrapper { float: right; } - .column-header__back-button { - padding-left: 5px; - padding-right: 0; - } - .column-header__setting-arrows { float: left; - - .column-header__setting-btn { - &:first-child { - padding-left: 7px; - padding-right: 5px; - } - - &:last-child { - padding-right: 7px; - padding-left: 5px; - margin-right: 5px; - margin-left: 0; - } - } - } - - .setting-toggle__label { - margin-left: 0; - margin-right: 8px; - } - - .status__avatar { - left: auto; - right: 10px; - } - - .status, - .activity-stream .status.light { - padding-left: 10px; - padding-right: 68px; - } - - .status__info .status__display-name, - .activity-stream .status.light .status__display-name { - padding-left: 25px; - padding-right: 0; - } - - .activity-stream .pre-header { - padding-right: 68px; - padding-left: 0; - } - - .status__prepend { - margin-left: 0; - margin-right: 68px; - } - - .status__prepend-icon-wrapper { - left: auto; - right: -26px; - } - - .activity-stream .pre-header .pre-header__icon { - left: auto; - right: 42px; - } - - .account__header__tabs__buttons > .icon-button { - margin-right: 0; - margin-left: 8px; - } - - .account__avatar-overlay-overlay { - right: auto; - left: 0; - } - - .column-back-button--slim-button { - right: auto; - left: 0; - } - - .status__relative-time, - .status__visibility-icon, - .activity-stream .status.light .status__header .status__meta { - float: 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; - } - - .picture-in-picture__header__account .display-name, - .detailed-status__display-name .display-name { - text-align: right; - } - - .detailed-status__display-avatar { - margin-right: 0; - margin-left: 10px; - float: right; - } - - .picture-in-picture__header__account .account__avatar { - margin-right: 0; - margin-left: 10px; - } - - .icon-button__counter { - margin-left: 0; - margin-right: 4px; - } - - .notifications-permission-banner__close { - right: auto; - left: 10px; - } - - .detailed-status__favorites, - .detailed-status__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; + .react-swipeable-view-container > * { + direction: rtl; } .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), darken($ui-base-color, 10%)); + background-image: linear-gradient( + to left, + rgba(darken($ui-base-color, 10%), 0), + darken($ui-base-color, 10%) + ); } } .simple_form select { - background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") 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; + background: darken($ui-base-color, 10%) + url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") + no-repeat left 8px center / auto 16px; } .fa-chevron-left::before { - content: "\F054"; + content: '\F054'; } .fa-chevron-right::before { - content: "\F053"; - } - - .column-back-button__icon { - margin-right: 0; - margin-left: 5px; - } - - .simple_form .input.radio_buttons .radio > label input { - left: auto; - right: 0; - } - - .picture-in-picture { - right: auto; - left: 20px; + content: '\F053'; } } diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index ce71d11e4..6c9ea916a 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -97,7 +97,7 @@ width: 20px; height: auto; vertical-align: middle; - margin-right: 5px; + margin-inline-end: 5px; fill: $primary-text-color; } @@ -138,7 +138,7 @@ a.button.logo-button { } .embed { - .status__content[data-spoiler="folded"] { + .status__content[data-spoiler='folded'] { .e-content { display: none; } @@ -162,7 +162,7 @@ a.button.logo-button { min-height: 48px + 2px; &__avatar { - left: 15px; + inset-inline-start: 15px; top: 17px; .account__avatar { @@ -176,12 +176,12 @@ a.button.logo-button { } &__prepend { - margin-left: 48px + 15px * 2; + margin-inline-start: 48px + 15px * 2; padding-top: 15px; } &__prepend-icon-wrapper { - left: -32px; + inset-inline-start: -32px; } .media-gallery, diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index b644b38f1..49e5bbf9f 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -10,7 +10,7 @@ line-height: 18px; vertical-align: top; border-top: 1px solid $ui-base-color; - text-align: left; + text-align: start; background: darken($ui-base-color, 4%); } @@ -91,12 +91,12 @@ &:first-child { border-radius: 4px 0 0; - border-left: 1px solid darken($ui-base-color, 8%); + border-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/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 2f6c41d5f..7de25f8fd 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -1,18 +1,18 @@ // Commonly used web colors -$black: #000000; // Black -$white: #ffffff; // White -$success-green: #79bd9a !default; // Padua -$error-red: #df405a !default; // Cerise -$warning-red: #ff5050 !default; // Sunset Orange -$gold-star: #ca8f04 !default; // Dark Goldenrod +$black: #000000; // Black +$white: #ffffff; // White +$success-green: #79bd9a !default; // Padua +$error-red: #df405a !default; // Cerise +$warning-red: #ff5050 !default; // Sunset Orange +$gold-star: #ca8f04 !default; // Dark Goldenrod $red-bookmark: $warning-red; // Values from the classic Mastodon UI -$classic-base-color: #282c37; // Midnight Express -$classic-primary-color: #9baec8; // Echo Blue -$classic-secondary-color: #d9e1e8; // Pattens Blue -$classic-highlight-color: #6364ff; // Brand purple +$classic-base-color: #282c37; // Midnight Express +$classic-primary-color: #9baec8; // Echo Blue +$classic-secondary-color: #d9e1e8; // Pattens Blue +$classic-highlight-color: #6364ff; // Brand purple // Variables for defaults in UI $base-shadow-color: $black !default; @@ -23,10 +23,13 @@ $valid-value-color: $success-green !default; $error-value-color: $error-red !default; // Tell UI to use selected colors -$ui-base-color: $classic-base-color !default; // Darkest -$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest -$ui-primary-color: $classic-primary-color !default; // Lighter -$ui-secondary-color: $classic-secondary-color !default; // Lightest +$ui-base-color: $classic-base-color !default; // Darkest +$ui-base-lighter-color: lighten( + $ui-base-color, + 26% +) !default; // Lighter darkest +$ui-primary-color: $classic-primary-color !default; // Lighter +$ui-secondary-color: $classic-secondary-color !default; // Lightest $ui-highlight-color: $classic-highlight-color !default; // Variables for texts diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 7a25d121b..1f69f0cf0 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -1,4 +1,4 @@ -@use "sass:math"; +@use 'sass:math'; .hero-widget { margin-bottom: 10px; @@ -39,8 +39,8 @@ width: 20px; height: 20px; margin: -3px 0 0; - margin-left: 0.075em; - margin-right: 0.075em; + margin-inline-start: 0.075em; + margin-inline-end: 0.075em; } p { @@ -171,7 +171,7 @@ margin-bottom: 15px; .fa { - margin-right: 5px; + margin-inline-end: 5px; color: $darker-text-color; } } @@ -284,7 +284,7 @@ } .trends__item__current { - padding-right: 0; + padding-inline-end: 0; } } } @@ -309,7 +309,7 @@ padding: 10px; &:first-child { - text-align: left; + text-align: start; } } @@ -340,9 +340,9 @@ tbody td.accounts-table__extra { width: 120px; - text-align: right; + text-align: end; color: $darker-text-color; - padding-right: 16px; + padding-inline-end: 16px; a { text-decoration: none; @@ -363,7 +363,7 @@ tbody td.accounts-table__interrelationships { width: 21px; - padding-right: 16px; + padding-inline-end: 16px; } .fa { |