diff options
Diffstat (limited to 'app/javascript/styles/mastodon/components.scss')
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 649 |
1 files changed, 425 insertions, 224 deletions
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 { |