diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
24 files changed, 2294 insertions, 2275 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index 6664a5756..705827473 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -5,7 +5,7 @@ &__preview { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; object-fit: cover; @@ -211,7 +211,7 @@ } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .account__relationship { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 5b3e1db1b..374f46907 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -30,7 +30,9 @@ border: 0; padding: 0; - & > .account__avatar-wrapper { margin: 0 8px 0 0 } + & > .account__avatar-wrapper { + margin-inline-end: 8px; + } & > .display-name { height: 24px; @@ -55,16 +57,16 @@ .account__avatar-wrapper { float: left; - margin-left: 12px; - margin-right: 12px; + margin-inline-start: 12px; + margin-inline-end: 12px; } .account__avatar { - @include avatar-radius(); + @include avatar-radius; + display: block; position: relative; cursor: pointer; - width: 36px; height: 36px; background-size: 36px 36px; @@ -72,16 +74,18 @@ &-inline { display: inline-block; vertical-align: middle; - margin-right: 5px; + margin-inline-end: 5px; } &-composite { @include avatar-radius; + overflow: hidden; position: relative; & div { @include avatar-radius; + float: left; position: relative; box-sizing: border-box; @@ -91,7 +95,7 @@ display: block; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); color: $primary-text-color; text-shadow: 1px 1px 2px $base-shadow-color; @@ -102,33 +106,34 @@ } .account__avatar-overlay { - position: relative; @include avatar-size(48px); position: relative; &-base { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(36px); img { @include avatar-radius; + width: 100%; height: 100%; } } &-overlay { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(24px); position: absolute; bottom: 0; - right: 0; + inset-inline-end: 0; z-index: 1; img { @include avatar-radius; + width: 100%; height: 100%; } @@ -193,12 +198,12 @@ text-decoration: none; overflow: hidden; flex: 0 1 100%; - border-left: 1px solid lighten($ui-base-color, 8%); + border-inline-start: 1px solid lighten($ui-base-color, 8%); padding: 10px 0; border-bottom: 4px solid transparent; &:first-child { - border-left: 0; + border-inline-start: 0; } &.active { @@ -242,12 +247,12 @@ .account-authorize__avatar { float: left; - margin-right: 10px; + margin-inline-end: 10px; } .notification__report { padding: 8px 10px; - padding-left: 68px; + padding-inline-start: 68px; position: relative; border-bottom: 1px solid lighten($ui-base-color, 8%); min-height: 54px; @@ -267,14 +272,15 @@ &__avatar { position: absolute; - left: 10px; + inset-inline-start: 10px; top: 10px; } } .notification__message { - margin-left: 42px; - padding: 8px 0 0 26px; + margin-inline-start: 42px; + padding-top:8px; + padding-inline-start: 26px; cursor: default; color: $darker-text-color; font-size: 15px; @@ -341,7 +347,7 @@ &__icons { position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); font-size: 24px; } @@ -379,7 +385,7 @@ &::before, &::after { display: block; - content: ""; + content: ''; position: absolute; bottom: 0; left: 50%; @@ -426,7 +432,7 @@ &__message { position: relative; - margin-left: 58px; + margin-inline-start: 58px; color: $dark-text-color; padding: 8px 0; padding-top: 0; @@ -441,7 +447,7 @@ } &__icon-wrapper { - left: -26px; + inset-inline-start: -26px; position: absolute; } @@ -495,7 +501,7 @@ &__info { position: absolute; top: 10px; - left: 10px; + inset-inline-start: 10px; } &__image { @@ -533,13 +539,21 @@ &__tabs { display: flex; - align-items: flex-start; + align-items: flex-end; justify-content: space-between; padding: 7px 10px; - margin-top: -55px; - gap: 8px; + margin-top: -81px; + height: 130px; overflow: hidden; - margin-left: -2px; // aligns the pfp with content below + margin-inline-start: -2px; // aligns the pfp with content below + + .account-role { + margin: 0 2px; + padding: 4px 0; + box-sizing: border-box; + min-width: 90px; + text-align: center; + } &__buttons { display: flex; @@ -622,8 +636,8 @@ color: $darker-text-color; .columns-area--mobile & { - padding-left: 20px; - padding-right: 20px; + padding-inline-start: 20px; + padding-inline-end: 20px; } } @@ -702,22 +716,22 @@ padding: 2px 6px; color: $darker-text-color; - &:hover, - &:active, - &:focus { - color: lighten($darker-text-color, 7%); - background-color: rgba($darker-text-color, 0.15); - } + &:hover, + &:active, + &:focus { + color: lighten($darker-text-color, 7%); + background-color: rgba($darker-text-color, 0.15); + } - &:focus { - background-color: rgba($darker-text-color, 0.3); - } + &:focus { + background-color: rgba($darker-text-color, 0.3); + } - &[disabled] { - color: darken($darker-text-color, 13%); - background-color: transparent; - cursor: default; - } + &[disabled] { + color: darken($darker-text-color, 13%); + background-color: transparent; + cursor: default; + } } .flex-spacer { @@ -736,8 +750,6 @@ display: block; box-sizing: border-box; width: calc(100% + 20px); - margin: 0; - margin-top: 5px; color: $secondary-text-color; background: $ui-base-color; padding: 10px; @@ -758,12 +770,14 @@ } .moved-account-banner, -.follow-request-banner { +.follow-request-banner, +.account-memorial-banner { padding: 20px; background: lighten($ui-base-color, 4%); display: flex; align-items: center; flex-direction: column; + &__message { color: $darker-text-color; padding: 8px 0; @@ -774,6 +788,7 @@ text-align: center; margin-bottom: 16px; } + &__action { display: flex; justify-content: space-between; @@ -790,3 +805,7 @@ .follow-request-banner .button { width: 100%; } + +.account-memorial-banner__message { + margin-bottom: 0; +} diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss index 85af9afc8..be27120a7 100644 --- a/app/javascript/flavours/glitch/styles/components/announcements.scss +++ b/app/javascript/flavours/glitch/styles/components/announcements.scss @@ -84,13 +84,13 @@ display: block; font-weight: 500; margin-bottom: 10px; - padding-right: 18px; + padding-inline-end: 18px; } &__unread { position: absolute; top: 19px; - right: 19px; + inset-inline-end: 19px; display: block; background: $highlight-text-color; border-radius: 50%; @@ -104,7 +104,7 @@ color: $darker-text-color; position: absolute; bottom: 3px; - right: 0; + inset-inline-end: 0; } } @@ -121,7 +121,7 @@ flex-wrap: wrap; align-items: center; margin-top: 15px; - margin-left: -2px; + margin-inline-start: -2px; width: calc(100% - (90px - 33px)); &__item { @@ -162,7 +162,7 @@ font-size: 13px; font-weight: 500; text-align: center; - margin-left: 6px; + margin-inline-start: 6px; color: $darker-text-color; } @@ -181,7 +181,11 @@ &.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%); diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 42a591931..a72afe726 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -182,7 +182,8 @@ $ui-header-height: 55px; cursor: pointer; flex: 0 0 auto; font-size: 16px; - padding: 0 5px 0 0; + padding: 0; + padding-inline-end: 5px; z-index: 3; &:hover { @@ -190,13 +191,14 @@ $ui-header-height: 55px; } &:last-child { - padding: 0 15px 0 0; + padding: 0; + padding-inline-end: 15px;; } } .column-back-button__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-back-button--slim { @@ -209,7 +211,7 @@ $ui-header-height: 55px; font-size: 16px; padding: 15px; position: absolute; - right: 0; + inset-inline-end: 0; top: -48px; } @@ -263,7 +265,7 @@ $ui-header-height: 55px; .column-link__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-subheading { @@ -286,17 +288,21 @@ $ui-header-height: 55px; &::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% + ); } } @@ -325,7 +331,7 @@ $ui-header-height: 55px; color: inherit; background: transparent; font: inherit; - text-align: left; + text-align: start; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -373,7 +379,7 @@ $ui-header-height: 55px; .column-header__buttons { height: 48px; display: flex; - margin-left: 0; + margin-inline-start: 0; } .column-header__links { @@ -381,7 +387,7 @@ $ui-header-height: 55px; } .column-header__links .text-btn { - margin-right: 10px; + margin-inline-end: 10px; } .column-header__button { @@ -424,6 +430,7 @@ $ui-header-height: 55px; button { @extend .column-header__button; + background: transparent; text-align: center; padding: 10px 5px; @@ -435,11 +442,11 @@ $ui-header-height: 55px; } } - .layout-single-column .column-header__notif-cleaning-buttons { @media screen and (min-width: $no-gap-breakpoint) { - b, i { - margin-right: 5px; + b, + i { + margin-inline-end: 5px; } br { @@ -487,6 +494,7 @@ $ui-header-height: 55px; // notif cleaning drawer &.ncd { transition: none; + &.collapsed { max-height: 0; opacity: 0.7; @@ -524,12 +532,12 @@ $ui-header-height: 55px; padding: 5px; &:first-child { - padding-right: 7px; + padding-inline-end: 7px; } &:last-child { - padding-left: 7px; - margin-left: 5px; + padding-inline-start: 7px; + margin-inline-start: 5px; } } } @@ -553,7 +561,7 @@ $ui-header-height: 55px; .column-header__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-settings__pillbar { @@ -575,8 +583,8 @@ $ui-header-height: 55px; font-size: inherit; flex: auto; background-color: $ui-base-color; - transition-property: background-color, box-shadow; transition: all 0.2s ease; + transition-property: background-color, box-shadow; &[disabled] { cursor: not-allowed; @@ -622,7 +630,8 @@ $ui-header-height: 55px; flex: 1 1 auto; align-items: center; justify-content: center; - @supports(display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: strict; } @@ -643,6 +652,7 @@ $ui-header-height: 55px; .follow_requests-unlocked_explanation { background: darken($ui-base-color, 4%); contain: initial; + flex-grow: 0; } .error-column { @@ -717,7 +727,7 @@ $ui-header-height: 55px; .column-inline-form { padding: 7px 15px; - padding-right: 5px; + padding-inline-end: 5px; display: flex; justify-content: flex-start; align-items: center; @@ -766,7 +776,7 @@ $ui-header-height: 55px; .column-select { &__control { - @include search-input(); + @include search-input; &::placeholder { color: lighten($darker-text-color, 4%); @@ -793,12 +803,12 @@ $ui-header-height: 55px; &__placeholder { color: $dark-text-color; - padding-left: 2px; + padding-inline-start: 2px; font-size: 12px; } &__value-container { - padding-left: 6px; + padding-inline-start: 6px; } &__multi-value { @@ -840,7 +850,8 @@ $ui-header-height: 55px; } &__menu { - @include search-popout(); + @include search-popout; + padding: 0; background: $ui-secondary-color; } @@ -880,7 +891,7 @@ $ui-header-height: 55px; &__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } h2 { @@ -916,7 +927,7 @@ $ui-header-height: 55px; p { font-size: 16px; - line-height: 24px; + line-height: 24px; font-weight: 400; color: $darker-text-color; } @@ -939,7 +950,7 @@ $ui-header-height: 55px; &__background { position: absolute; - left: 0; + inset-inline-start: 0; bottom: 0; height: 220px; width: auto; diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index aa2d52ed0..d7b8281ee 100644 --- a/app/javascript/flavours/glitch/styles/components/compose_form.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -4,7 +4,7 @@ .emoji-picker-dropdown { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { @@ -32,12 +32,12 @@ .spoiler-input { height: 0; transform-origin: bottom; - opacity: 0.0; + opacity: 0; &.spoiler-input--visible { height: 36px; margin-bottom: 11px; - opacity: 1.0; + opacity: 1; } input { @@ -59,8 +59,12 @@ color: $dark-text-color; } - &:focus { outline: 0 } - @include single-column('screen and (max-width: 630px)') { font-size: 16px } + &:focus { + outline: 0; + } + @include single-column('screen and (max-width: 630px)') { + font-size: 16px; + } } } @@ -90,7 +94,6 @@ .compose-form__sensitive-button { padding: 10px; padding-top: 0; - font-size: 14px; font-weight: 500; @@ -98,7 +101,7 @@ color: $highlight-text-color; } - input[type=checkbox] { + input[type='checkbox'] { display: none; } @@ -110,15 +113,17 @@ width: 18px; height: 18px; flex: 0 0 auto; - margin-left: 5px; - margin-right: 10px; + margin-inline-start: 5px; + margin-inline-end: 10px; top: -1px; border-radius: 4px; vertical-align: middle; &.active { 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; } } } @@ -137,7 +142,9 @@ margin-bottom: 5px; overflow: hidden; - & > .account.small { color: $inverted-text-color; } + & > .account.small { + color: $inverted-text-color; + } } .reply-indicator__cancel { @@ -147,19 +154,17 @@ .reply-indicator__content { position: relative; - margin: 10px 0; - padding: 0 12px; font-size: 14px; line-height: 20px; - color: $inverted-text-color; word-wrap: break-word; font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; overflow: hidden; + padding-top: 5px; + color: $inverted-text-color; + white-space: pre-wrap; - p, pre, blockquote { + p, + pre { margin-bottom: 20px; white-space: pre-wrap; @@ -168,80 +173,21 @@ } } - h1, h2, h3, h4, h5 { - margin-top: 20px; - margin-bottom: 20px; - } - - h1, h2 { - font-weight: 700; - font-size: 18px; - } - - h2 { - font-size: 16px; - } - - h3, h4, h5 { - font-weight: 500; - } - - blockquote { - padding-left: 10px; - border-left: 3px solid $inverted-text-color; - color: $inverted-text-color; - white-space: normal; - - p:last-child { - margin-bottom: 0; - } - } - - b, strong { - font-weight: 700; - } - - em, i { - font-style: italic; - } - - sub { - font-size: smaller; - vertical-align: sub; - } - - sup { - font-size: smaller; - vertical-align: super; - } - - ul, ol { - margin-left: 1em; - - p { - margin: 0; - } - } - - ul { - list-style-type: disc; - } - - ol { - list-style-type: decimal; - } - a { color: $lighter-text-color; text-decoration: none; - &:hover { text-decoration: underline } + &:hover { + text-decoration: underline; + } &.mention { &:hover { text-decoration: none; - span { text-decoration: underline } + span { + text-decoration: underline; + } } } } @@ -308,20 +254,21 @@ display: block; position: absolute; top: 29px; - right: 5px; + inset-inline-end: 5px; bottom: 5px; overflow: hidden; & > .textarea_icon { display: block; - margin: 2px 0 0 2px; + margin-top: 2px; + margin-inline-start: 2px; width: 24px; height: 24px; color: $lighter-text-color; font-size: 18px; line-height: 24px; text-align: center; - opacity: .8; + opacity: 0.8; } } @@ -331,19 +278,18 @@ } .autosuggest-textarea__suggestions { - display: block; - position: absolute; box-sizing: border-box; + display: none; + position: absolute; top: 100%; - border-radius: 0 0 4px 4px; - padding: 6px; width: 100%; - color: $inverted-text-color; - background: $ui-secondary-color; + z-index: 99; box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + background: $ui-secondary-color; + border-radius: 0 0 4px 4px; + color: $inverted-text-color; font-size: 14px; - z-index: 99; - display: none; + padding: 6px; } .autosuggest-textarea__suggestions--visible { @@ -358,7 +304,9 @@ &:hover, &:focus, &:active, - &.selected { background: darken($ui-secondary-color, 10%) } + &.selected { + background: darken($ui-secondary-color, 10%); + } > .account, > .emoji, @@ -387,7 +335,7 @@ &__uses { flex: 0 0 auto; - text-align: right; + text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -396,7 +344,9 @@ & > .account.small { .display-name { - & > span { color: $lighter-text-color } + & > span { + color: $lighter-text-color; + } } } } @@ -430,7 +380,9 @@ background-repeat: no-repeat; overflow: hidden; - & > .close { mix-blend-mode: difference } + & > .close { + mix-blend-mode: difference; + } } .icon-button { @@ -452,15 +404,25 @@ 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 + ); } } .compose-form__upload__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; @@ -474,7 +436,7 @@ .fa { font-size: 34px; - margin-right: 10px; + margin-inline-end: 10px; } span { @@ -495,13 +457,13 @@ border-radius: 6px; width: 100%; height: 6px; - background: $ui-base-lighter-color; + background: darken($simple-background-color, 8%); } .upload-progress__tracker { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; height: 6px; border-radius: 6px; background: $ui-highlight-color; @@ -543,7 +505,8 @@ margin: 0 3px; border-width: 0 0 0 1px; border-style: none none none solid; - border-color: transparent transparent transparent darken($simple-background-color, 24%); + border-color: transparent transparent transparent + darken($simple-background-color, 24%); padding: 0; width: 0; height: 27px; @@ -553,7 +516,7 @@ .character-counter__wrapper { align-self: center; - margin-right: 4px; + margin-inline-end: 4px; } .privacy-dropdown.active { @@ -604,7 +567,9 @@ flex: 1 1 auto; color: $lighter-text-color; - &:not(:first-child) { margin-left: 10px } + &:not(:first-child) { + margin-inline-start: 10px; + } strong { display: block; @@ -621,11 +586,15 @@ .privacy-dropdown__option__content { color: $primary-text-color; - strong { color: $primary-text-color } + strong { + color: $primary-text-color; + } } } - &.active:hover { background: lighten($ui-highlight-color, 4%) } + &.active:hover { + background: lighten($ui-highlight-color, 4%); + } } .compose-form__publish { @@ -667,11 +636,11 @@ } .emoji-mart-search { - padding-right: 10px; + padding-inline-end: 10px; } .emoji-mart-search-icon { - right: 10px + 5px; + inset-inline-end: 10px + 5px; } .emoji-mart-scroll { diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss index 803e075c9..db9a23bce 100644 --- a/app/javascript/flavours/glitch/styles/components/directory.scss +++ b/app/javascript/flavours/glitch/styles/components/directory.scss @@ -11,7 +11,11 @@ } .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 + ); } .filter-form { @@ -33,14 +37,13 @@ display: inline-block; padding: 6px 0; line-height: 18px; - cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; - input[type=radio], - input[type=checkbox] { + input[type='radio'], + input[type='checkbox'] { display: none; } @@ -52,7 +55,7 @@ width: 18px; height: 18px; flex: 0 0 auto; - margin-right: 10px; + margin-inline-end: 10px; top: -1px; border-radius: 50%; vertical-align: middle; diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss index a4a1cfc84..c3b67da4a 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.scss @@ -1,15 +1,17 @@ -$doodleBg: #d9e1e8; +$doodle-background: #d9e1e8; + .doodle-modal { @extend .boost-modal; + width: unset; } .doodle-modal__container { - background: $doodleBg; + background: $doodle-background; text-align: center; line-height: 0; // remove weird gap under canvas canvas { - border: 5px solid $doodleBg; + border: 5px solid $doodle-background; } } @@ -24,7 +26,6 @@ $doodleBg: #d9e1e8; .doodle-toolbar { line-height: 1; - display: flex; flex-direction: column; flex-grow: 0; @@ -34,25 +35,27 @@ $doodleBg: #d9e1e8; label { display: inline-block; width: 70px; - text-align: right; - margin-right: 2px; + text-align: end; + margin-inline-end: 2px; } - input[type="number"],input[type="text"] { + input[type='number'], + input[type='text'] { width: 40px; } + span.val { display: inline-block; - text-align: left; + text-align: start; width: 50px; } } } .doodle-palette { - padding-right: 0 !important; + padding-inline-end: 0 !important; border: 1px solid black; - line-height: .2rem; + line-height: 0.2rem; flex-grow: 0; background: white; @@ -60,14 +63,15 @@ $doodleBg: #d9e1e8; appearance: none; width: 1rem; height: 1rem; - margin: 0; padding: 0; + margin: 0; + padding: 0; text-align: center; color: black; text-shadow: 0 0 1px white; cursor: pointer; - box-shadow: inset 0 0 1px rgba(white, .5); + box-shadow: inset 0 0 1px rgba(white, 0.5); border: 1px solid black; - outline-offset:-1px; + outline-offset: -1px; &.foreground { outline: 1px dashed white; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 3e2604d4d..a9c683c37 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -8,11 +8,11 @@ flex: none; &:first-child { - padding-left: 10px; + padding-inline-start: 10px; } &:last-child { - padding-right: 10px; + padding-inline-end: 10px; } @include single-column('screen and (max-width: 630px)') { @@ -34,7 +34,8 @@ } @include single-column('screen and (max-width: 630px)') { - :root & { // Overrides `.wide` for single-column view + :root & { + // Overrides `.wide` for single-column view flex: auto; width: 100%; min-width: 0; @@ -43,16 +44,20 @@ } } - .react-swipeable-view-container & { height: 100% } + .react-swipeable-view-container & { + height: 100%; + } } .drawer--header { - display: flex; - flex-direction: row; - margin-bottom: 10px; flex: none; - background: lighten($ui-base-color, 8%); font-size: 16px; + background: lighten($ui-base-color, 8%); + margin-bottom: 10px; + display: flex; + flex-direction: row; + border-radius: 4px; + overflow: hidden; & > * { display: block; @@ -84,12 +89,18 @@ margin-bottom: 10px; flex: none; - @include limited-single-column('screen and (max-width: #{$no-gap-breakpoint})') { margin-bottom: 0 } - @include single-column('screen and (max-width: 630px)') { font-size: 16px } + @include limited-single-column( + 'screen and (max-width: #{$no-gap-breakpoint})' + ) { + margin-bottom: 0; + } + @include single-column('screen and (max-width: 630px)') { + font-size: 16px; + } } .search-popout { - @include search-popout(); + @include search-popout; } .navigation-bar { @@ -115,7 +126,7 @@ .navigation-bar__profile { flex: 1 1 auto; - margin-left: 8px; + margin-inline-start: 8px; overflow: hidden; & > a:hover { @@ -143,7 +154,7 @@ .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -174,12 +185,13 @@ position: relative; overflow: hidden; display: flex; + border-radius: 4px; } .drawer__inner { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; background: lighten($ui-base-color, 13%); box-sizing: border-box; padding: 0; @@ -196,7 +208,9 @@ } .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; @@ -208,7 +222,6 @@ width: 85%; height: 100%; pointer-events: none; - user-drag: none; user-select: none; } @@ -228,14 +241,14 @@ .pseudo-drawer { background: lighten($ui-base-color, 13%); font-size: 13px; - text-align: left; + text-align: start; } .drawer__backdrop { cursor: pointer; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background: rgba($base-overlay-background, 0.5); @@ -244,13 +257,27 @@ @for $i from 0 through 3 { .mbstobon-#{$i} .drawer__inner__mastodon { @if $i == 3 { - background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%); + background: url('~flavours/glitch/images/wave-drawer.png') + no-repeat + bottom / + 100% + auto, + lighten($ui-base-color, 13%); } @else { - background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%); + background: url('~flavours/glitch/images/wave-drawer-glitched.png') + no-repeat + bottom / + 100% + auto, + lighten($ui-base-color, 13%); } & > .mastodon { - background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain; + background: url('~flavours/glitch/images/mbstobon-ui-#{$i}.png') + no-repeat + left + bottom / + contain; @if $i != 3 { filter: contrast(50%) brightness(50%); diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index c037e03f9..f76288978 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -2,7 +2,7 @@ font-size: inherit; vertical-align: middle; object-fit: contain; - margin: -.2ex .15em .2ex; + margin: -0.2ex 0.15em 0.2ex; width: 16px; height: 16px; @@ -31,7 +31,7 @@ .emoji-picker-dropdown__modifiers { position: absolute; top: 60px; - right: 11px; + inset-inline-end: 11px; cursor: pointer; } @@ -39,7 +39,7 @@ position: absolute; z-index: 4; top: -4px; - left: -8px; + inset-inline-start: -8px; background: $simple-background-color; border-radius: 4px; box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -72,7 +72,10 @@ .emoji-button { display: block; - padding: 5px 5px 2px 2px; + padding-top: 5px; + padding-bottom: 2px; + padding-inline-start: 2px; + padding-inline-end: 5px; outline: 0; cursor: pointer; diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 790650cfa..e402838db 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -46,7 +46,7 @@ text-align: center; padding: 12px 4px; overflow: hidden; - transition: color .1s ease-out; + transition: color 0.1s ease-out; cursor: pointer; background: transparent; border: 0; @@ -71,7 +71,7 @@ .emoji-mart-anchor-bar { position: absolute; bottom: -3px; - left: 0; + inset-inline-start: 0; width: 100%; height: 3px; background-color: darken($ui-highlight-color, 3%); @@ -106,7 +106,7 @@ .emoji-mart-search { padding: 10px; - padding-right: 45px; + padding-inline-end: 45px; background: $simple-background-color; position: relative; @@ -114,7 +114,7 @@ font-size: 16px; font-weight: 400; padding: 7px 9px; - padding-right: 25px; + padding-inline-end: 25px; font-family: inherit; display: block; width: 100%; @@ -142,7 +142,7 @@ .emoji-mart-search-icon { position: absolute; top: 18px; - right: 45px + 5px; + inset-inline-end: 45px + 5px; z-index: 2; padding: 2px 5px 1px; border: 0; @@ -174,10 +174,10 @@ &:hover::before { z-index: 0; - content: ""; + content: ''; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background-color: rgba($ui-secondary-color, 0.7); @@ -246,8 +246,8 @@ padding: 5px 6px; padding-top: 70px; - .emoji-mart-no-results-label { - margin-top: .2em; + .emoji-mart-no-results-label { + margin-top: 0.2em; } .emoji-mart-emoji:hover::before { diff --git a/app/javascript/flavours/glitch/styles/components/error_boundary.scss b/app/javascript/flavours/glitch/styles/components/error_boundary.scss index 3176690e2..fbbb1ceb0 100644 --- a/app/javascript/flavours/glitch/styles/components/error_boundary.scss +++ b/app/javascript/flavours/glitch/styles/components/error_boundary.scss @@ -17,8 +17,8 @@ ul { list-style: disc; - margin-left: 0; - padding-left: 1em; + margin-inline-start: 0; + padding-inline-start: 1em; } textarea.web_app_crash-stacktrace { diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss index bad77fc1c..8f67b365f 100644 --- a/app/javascript/flavours/glitch/styles/components/explore.scss +++ b/app/javascript/flavours/glitch/styles/components/explore.scss @@ -20,7 +20,7 @@ .search .fa { top: 10px; - right: 10px; + inset-inline-end: 10px; color: $dark-text-color; } @@ -104,7 +104,7 @@ object-fit: fill; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; &--hidden { diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index d50316366..497b66b3e 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1,1807 +1,4 @@ -.app-body { - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; -} - -.animated-number { - display: inline-flex; - flex-direction: column; - align-items: stretch; - overflow: hidden; - position: relative; -} - -.link-button { - display: block; - font-size: 15px; - line-height: 20px; - color: $highlight-text-color; - border: 0; - background: transparent; - padding: 0; - cursor: pointer; - text-decoration: none; - - &--destructive { - color: $error-value-color; - } - - &:hover, - &:active { - text-decoration: underline; - } - - &:disabled { - color: $ui-primary-color; - cursor: default; - } -} - -.button { - background-color: darken($ui-highlight-color, 3%); - border: 10px none; - border-radius: 4px; - box-sizing: border-box; - color: $primary-text-color; - cursor: pointer; - display: inline-block; - font-family: inherit; - font-size: 15px; - font-weight: 500; - letter-spacing: 0; - line-height: 22px; - overflow: hidden; - padding: 7px 18px; - position: relative; - text-align: center; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - width: auto; - - &:active, - &:focus, - &:hover { - background-color: $ui-highlight-color; - } - - &--destructive { - &:active, - &:focus, - &:hover { - background-color: $error-red; - transition: none; - } - } - - &:disabled { - background-color: $ui-primary-color; - cursor: default; - } - - &.button-alternative { - color: $inverted-text-color; - background: $ui-primary-color; - - &:active, - &:focus, - &:hover { - background-color: lighten($ui-primary-color, 4%); - } - } - - &.button-alternative-2 { - background: $ui-base-lighter-color; - - &:active, - &:focus, - &:hover { - background-color: lighten($ui-base-lighter-color, 4%); - } - } - - &.button-secondary { - font-size: 16px; - line-height: 36px; - height: auto; - color: $darker-text-color; - text-transform: none; - background: transparent; - padding: 6px 17px; - border: 1px solid $ui-primary-color; - - &:active, - &:focus, - &:hover { - border-color: lighten($ui-primary-color, 4%); - color: lighten($darker-text-color, 4%); - text-decoration: none; - } - - &:disabled { - opacity: 0.5; - } - } - - &.button-tertiary { - background: transparent; - padding: 6px 17px; - color: $highlight-text-color; - border: 1px solid $highlight-text-color; - - &:active, - &:focus, - &:hover { - background: $ui-highlight-color; - color: $primary-text-color; - border: 0; - padding: 7px 18px; - } - - &:disabled { - opacity: 0.5; - } - - &.button--confirmation { - color: $valid-value-color; - border-color: $valid-value-color; - - &:active, - &:focus, - &:hover { - background: $valid-value-color; - color: $primary-text-color; - } - } - - &.button--destructive { - color: $error-value-color; - border-color: $error-value-color; - - &:active, - &:focus, - &:hover { - background: $error-value-color; - color: $primary-text-color; - } - } - } - - &.button--block { - display: block; - width: 100%; - } - - .layout-multiple-columns &.button--with-bell { - font-size: 12px; - padding: 0 8px; - } -} - -.icon-button { - display: inline-block; - padding: 0; - color: $action-button-color; - border: 0; - border-radius: 4px; - background: transparent; - cursor: pointer; - transition: all 100ms ease-in; - transition-property: background-color, color; - text-decoration: none; - - a { - color: inherit; - text-decoration: none; - } - - &:hover, - &:active, - &:focus { - color: lighten($action-button-color, 7%); - background-color: rgba($action-button-color, 0.15); - transition: all 200ms ease-out; - transition-property: background-color, color; - } - - &:focus { - background-color: rgba($action-button-color, 0.3); - } - - &.disabled { - color: darken($action-button-color, 13%); - background-color: transparent; - cursor: default; - } - - &.active { - color: $highlight-text-color; - } - - &.copyable { - transition: background 300ms linear; - } - - &.copied { - background: $valid-value-color; - transition: none; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &.inverted { - color: $lighter-text-color; - - &:hover, - &:active, - &:focus { - color: darken($lighter-text-color, 7%); - background-color: rgba($lighter-text-color, 0.15); - } - - &:focus { - background-color: rgba($lighter-text-color, 0.3); - } - - &.disabled { - color: lighten($lighter-text-color, 7%); - background-color: transparent; - } - - &.active { - color: $highlight-text-color; - - &.disabled { - color: lighten($highlight-text-color, 13%); - } - } - } - - &.overlayed { - box-sizing: content-box; - background: rgba($base-overlay-background, 0.6); - color: rgba($primary-text-color, 0.7); - border-radius: 4px; - padding: 2px; - - &:hover { - background: rgba($base-overlay-background, 0.9); - } - } - - &--with-counter { - display: inline-flex; - align-items: center; - width: auto !important; - padding: 0 4px 0 2px; - } - - &__counter { - display: inline-block; - width: auto; - margin-left: 4px; - font-size: 12px; - font-weight: 500; - } -} - -.text-icon, -.text-icon-button { - font-weight: 600; - font-size: 11px; - line-height: 27px; - cursor: default; -} - -.text-icon-button { - color: $lighter-text-color; - border: 0; - border-radius: 4px; - background: transparent; - cursor: pointer; - padding: 0 3px; - outline: 0; - transition: all 100ms ease-in; - transition-property: background-color, color; - - &:hover, - &:active, - &:focus { - color: darken($lighter-text-color, 7%); - background-color: rgba($lighter-text-color, 0.15); - transition: all 200ms ease-out; - transition-property: background-color, color; - } - - &:focus { - background-color: rgba($lighter-text-color, 0.3); - } - - &.disabled { - color: lighten($lighter-text-color, 20%); - background-color: transparent; - cursor: default; - } - - &.active { - color: $highlight-text-color; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } -} - -body > [data-popper-placement] { - z-index: 3; -} - -.invisible { - font-size: 0; - line-height: 0; - display: inline-block; - width: 0; - height: 0; - position: absolute; - - img, - svg { - margin: 0 !important; - border: 0 !important; - padding: 0 !important; - width: 0 !important; - height: 0 !important; - } -} - -.ellipsis { - &::after { - content: "…"; - } -} - -.notification__favourite-icon-wrapper { - left: 0; - position: absolute; - - .fa.star-icon { - color: $gold-star; - } -} - -.icon-button.star-icon.active { - color: $gold-star; -} - -.icon-button.bookmark-icon.active { - color: $red-bookmark; -} - -.no-reduce-motion .icon-button.star-icon { - &.activate { - & > .fa-star { - animation: spring-rotate-in 1s linear; - } - } - - &.deactivate { - & > .fa-star { - animation: spring-rotate-out 1s linear; - } - } -} - -.notification__display-name { - color: inherit; - font-weight: 500; - text-decoration: none; - - &:hover { - color: $primary-text-color; - text-decoration: underline; - } -} - -.display-name { - display: block; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - a { - color: inherit; - text-decoration: inherit; - } - - strong { - display: block; - } - - > a:hover { - strong { - text-decoration: underline; - } - } - - &.inline { - padding: 0; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - strong { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - - span { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - } -} - -.display-name__html { - font-weight: 500; -} - -.display-name__account { - font-size: 14px; -} - -.image-loader { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ - - * { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ - } - - &::-webkit-scrollbar, - *::-webkit-scrollbar { - width: 0; - height: 0; - background: transparent; /* Chrome/Safari/Webkit */ - } - - .image-loader__preview-canvas { - max-width: $media-modal-media-max-width; - max-height: $media-modal-media-max-height; - background: url('~images/void.png') repeat; - object-fit: contain; - } - - .loading-bar__container { - position: relative; - } - - .loading-bar { - position: absolute; - } - - &.image-loader--amorphous .image-loader__preview-canvas { - display: none; - } -} - -.zoomable-image { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - - img { - max-width: $media-modal-media-max-width; - max-height: $media-modal-media-max-height; - width: auto; - height: auto; - object-fit: contain; - } -} - -.dropdown-animation { - animation: dropdown 300ms cubic-bezier(0.1, 0.7, 0.1, 1); - - @keyframes dropdown { - from { - opacity: 0; - transform: scaleX(0.85) scaleY(0.75); - } - - to { - opacity: 1; - transform: scaleX(1) scaleY(1); - } - } - - &.top { - transform-origin: bottom; - } - - &.right { - transform-origin: left; - } - - &.bottom { - transform-origin: top; - } - - &.left { - transform-origin: right; - } - - .reduce-motion & { - animation: none; - } -} - -.dropdown { - display: inline-block; -} - -.dropdown__content { - display: none; - position: absolute; -} - -.dropdown-menu__separator { - border-bottom: 1px solid darken($ui-secondary-color, 8%); - margin: 5px 7px 6px; - height: 0; -} - -.dropdown-menu { - background: $ui-secondary-color; - padding: 4px 0; - border-radius: 4px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - z-index: 9999; - - &__text-button { - display: inline; - color: inherit; - background: transparent; - border: 0; - margin: 0; - padding: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; - - &:focus { - outline: 1px dotted; - } - } - - &__container { - &__header { - border-bottom: 1px solid darken($ui-secondary-color, 8%); - padding: 4px 14px; - padding-bottom: 8px; - font-size: 13px; - line-height: 18px; - color: $inverted-text-color; - } - - &__list { - list-style: none; - - &--scrollable { - max-height: 300px; - overflow-y: scroll; - } - } - - &--loading { - display: flex; - align-items: center; - justify-content: center; - padding: 30px 45px; - } - } -} - -.dropdown-menu__arrow { - position: absolute; - - &::before { - content: ''; - display: block; - width: 14px; - height: 5px; - background-color: $ui-secondary-color; - mask-image: url("data:image/svg+xml;utf8,<svg width='14' height='5' xmlns='http://www.w3.org/2000/svg'><path d='M7 0L0 5h14L7 0z' fill='white'/></svg>"); - } - - &.top { - bottom: -5px; - - &::before { - transform: rotate(180deg); - } - } - - &.right { - left: -9px; - - &::before { - transform: rotate(-90deg); - } - } - - &.bottom { - top: -5px; - } - - &.left { - right: -9px; - - &::before { - transform: rotate(90deg); - } - } -} - -.dropdown-menu__item { - font-size: 13px; - line-height: 18px; - display: block; - color: $inverted-text-color; - - a, - button { - font-family: inherit; - font-size: inherit; - line-height: inherit; - display: block; - width: 100%; - padding: 4px 14px; - border: 0; - margin: 0; - box-sizing: border-box; - text-decoration: none; - background: $ui-secondary-color; - color: inherit; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: inherit; - - &:focus, - &:hover, - &:active { - background: $ui-highlight-color; - color: $secondary-text-color; - outline: 0; - } - } -} - -.dropdown-menu__item--text { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding: 4px 14px; -} - -.dropdown-menu__item.edited-timestamp__history__item { - border-bottom: 1px solid darken($ui-secondary-color, 8%); - - &:last-child { - border-bottom: 0; - } - - &.dropdown-menu__item--text, - a, - button { - padding: 8px 14px; - } -} - -.inline-account { - display: inline-flex; - align-items: center; - vertical-align: top; - - .account__avatar { - margin-right: 5px; - border-radius: 50%; - } - - strong { - font-weight: 600; - } -} - -.dropdown--active .dropdown__content { - display: block; - line-height: 18px; - max-width: 311px; - right: 0; - text-align: left; - z-index: 9999; - - & > ul { - list-style: none; - background: $ui-secondary-color; - padding: 4px 0; - border-radius: 4px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); - min-width: 140px; - position: relative; - } - - &.dropdown__right { - right: 0; - } - - &.dropdown__left { - & > ul { - left: -98px; - } - } - - & > ul > li > a { - font-size: 13px; - line-height: 18px; - display: block; - padding: 4px 14px; - box-sizing: border-box; - text-decoration: none; - background: $ui-secondary-color; - color: $inverted-text-color; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:focus { - outline: 0; - } - - &:hover { - background: $ui-highlight-color; - color: $secondary-text-color; - } - } -} - -.dropdown__icon { - vertical-align: middle; -} - -.static-content { - padding: 10px; - padding-top: 20px; - color: $dark-text-color; - - h1 { - font-size: 16px; - font-weight: 500; - margin-bottom: 40px; - text-align: center; - } - - p { - font-size: 13px; - margin-bottom: 20px; - } -} - -.column, -.drawer { - flex: 1 1 100%; - overflow: hidden; -} - -@media screen and (min-width: 631px) { - .columns-area { - padding: 0; - } - - .column, - .drawer { - flex: 0 0 auto; - padding: 10px; - padding-left: 5px; - padding-right: 5px; - - &:first-child { - padding-left: 10px; - } - - &:last-child { - padding-right: 10px; - } - } - - .columns-area > div { - .column, - .drawer { - padding-left: 5px; - padding-right: 5px; - } - } -} - -.tabs-bar { - box-sizing: border-box; - display: flex; - background: lighten($ui-base-color, 8%); - flex: 0 0 auto; - overflow-y: auto; -} - -.tabs-bar__link { - display: block; - flex: 1 1 auto; - padding: 15px 10px; - padding-bottom: 13px; - color: $primary-text-color; - text-decoration: none; - text-align: center; - font-size: 14px; - font-weight: 500; - border-bottom: 2px solid lighten($ui-base-color, 8%); - transition: all 50ms linear; - transition-property: border-bottom, background, color; - - .fa { - font-weight: 400; - font-size: 16px; - } - - &:hover, - &:focus, - &:active { - @include multi-columns('screen and (min-width: 631px)') { - background: lighten($ui-base-color, 14%); - border-bottom-color: lighten($ui-base-color, 14%); - } - } - - &.active { - border-bottom: 2px solid $ui-highlight-color; - color: $highlight-text-color; - } - - span { - margin-left: 5px; - display: none; - } - - span.icon { - margin-left: 0; - display: inline; - } -} - -.icon-with-badge { - position: relative; - - &__badge { - position: absolute; - left: 9px; - top: -13px; - background: $ui-highlight-color; - border: 2px solid lighten($ui-base-color, 8%); - padding: 1px 6px; - border-radius: 6px; - font-size: 10px; - font-weight: 500; - line-height: 14px; - color: $primary-text-color; - } - - &__issue-badge { - position: absolute; - left: 11px; - bottom: 1px; - display: block; - background: $error-red; - border-radius: 50%; - width: 0.625rem; - height: 0.625rem; - } -} - -.column-link--transparent .icon-with-badge__badge { - border-color: darken($ui-base-color, 8%); -} - -.scrollable { - overflow-y: scroll; - overflow-x: hidden; - flex: 1 1 auto; - -webkit-overflow-scrolling: touch; - - &.optionally-scrollable { - overflow-y: auto; - } - - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } - - &--flex { - display: flex; - flex-direction: column; - } - - &__append { - flex: 1 1 auto; - position: relative; - min-height: 120px; - } - - .scrollable { - flex: 1 1 auto; - } -} - -.scrollable.fullscreen { - @supports(display: grid) { // hack to fix Chrome <57 - contain: none; - } -} - -.react-toggle { - display: inline-block; - position: relative; - cursor: pointer; - background-color: transparent; - border: 0; - padding: 0; - user-select: none; - -webkit-tap-highlight-color: rgba($base-overlay-background, 0); - -webkit-tap-highlight-color: transparent; -} - -.react-toggle-screenreader-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.react-toggle--disabled { - cursor: not-allowed; - opacity: 0.5; - transition: opacity 0.25s; -} - -.react-toggle-track { - width: 50px; - height: 24px; - padding: 0; - border-radius: 30px; - background-color: $ui-base-color; - transition: background-color 0.2s ease; -} - -.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { - background-color: darken($ui-base-color, 10%); -} - -.react-toggle--checked .react-toggle-track { - background-color: darken($ui-highlight-color, 2%); -} - -.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { - background-color: $ui-highlight-color; -} - -.react-toggle-track-check { - position: absolute; - width: 14px; - height: 10px; - top: 0; - bottom: 0; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - left: 8px; - opacity: 0; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-check { - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle-track-x { - position: absolute; - width: 10px; - height: 10px; - top: 0; - bottom: 0; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - right: 10px; - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-x { - opacity: 0; -} - -.react-toggle-thumb { - position: absolute; - top: 1px; - left: 1px; - width: 22px; - height: 22px; - border: 1px solid $ui-base-color; - border-radius: 50%; - background-color: darken($simple-background-color, 2%); - box-sizing: border-box; - transition: all 0.25s ease; - transition-property: border-color, left; -} - -.react-toggle--checked .react-toggle-thumb { - left: 27px; - border-color: $ui-highlight-color; -} - -.getting-started__wrapper, -.getting_started, -.flex-spacer { - background: $ui-base-color; -} - -.getting-started__wrapper { - position: relative; - overflow-y: auto; -} - -.flex-spacer { - flex: 1 1 auto; -} - -.getting-started { - background: $ui-base-color; - flex: 1 0 auto; - - p { - color: $secondary-text-color; - } - - a { - color: $dark-text-color; - } - - &__trends { - flex: 0 1 auto; - opacity: 1; - animation: fade 150ms linear; - margin-top: 10px; - - h4 { - border-bottom: 1px solid lighten($ui-base-color, 8%); - padding: 10px; - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - - a { - color: $darker-text-color; - text-decoration: none; - } - } - - @media screen and (max-height: 810px) { - .trends__item:nth-of-type(3) { - display: none; - } - } - - @media screen and (max-height: 720px) { - .trends__item:nth-of-type(2) { - display: none; - } - } - - @media screen and (max-height: 670px) { - display: none; - } - - .trends__item { - border-bottom: 0; - padding: 10px; - - &__current { - color: $darker-text-color; - } - } - } -} - -.column-link__badge { - display: inline-block; - border-radius: 4px; - font-size: 12px; - line-height: 19px; - font-weight: 500; - background: $ui-base-color; - padding: 4px 8px; - margin: -6px 10px; -} - -.keyboard-shortcuts { - padding: 8px 0 0; - overflow: hidden; - - thead { - position: absolute; - left: -9999px; - } - - td { - padding: 0 10px 8px; - } - - kbd { - display: inline-block; - padding: 3px 5px; - background-color: lighten($ui-base-color, 8%); - border: 1px solid darken($ui-base-color, 4%); - } -} - -.setting-text { - color: $darker-text-color; - background: transparent; - border: 0; - border-bottom: 2px solid $ui-primary-color; - outline: 0; - box-sizing: border-box; - display: block; - font-family: inherit; - margin-bottom: 10px; - padding: 7px 0; - width: 100%; - - &:focus, - &:active { - color: $primary-text-color; - border-bottom-color: $ui-highlight-color; - } - - @include limited-single-column('screen and (max-width: 600px)') { - font-size: 16px; - } - - &.light { - color: $inverted-text-color; - border-bottom: 2px solid lighten($ui-base-color, 27%); - - &:focus, - &:active { - color: $inverted-text-color; - border-bottom-color: $ui-highlight-color; - } - } -} - -button.icon-button i.fa-retweet { - background-position: 0 0; - height: 19px; - transition: background-position 0.9s steps(10); - transition-duration: 0s; - vertical-align: middle; - width: 22px; - - &::before { - display: none !important; - } -} - -button.icon-button.active i.fa-retweet { - transition-duration: 0.9s; - background-position: 0 100%; -} - -.reduce-motion button.icon-button i.fa-retweet, -.reduce-motion button.icon-button.active i.fa-retweet { - transition: none; -} - -.reduce-motion button.icon-button.disabled i.fa-retweet { - color: darken($action-button-color, 13%); -} - -.load-more { - display: block; - color: $dark-text-color; - background-color: transparent; - border: 0; - font-size: inherit; - text-align: center; - line-height: inherit; - margin: 0; - padding: 15px; - box-sizing: border-box; - width: 100%; - clear: both; - text-decoration: none; - - &:hover { - background: lighten($ui-base-color, 2%); - } -} - -.load-gap { - border-bottom: 1px solid lighten($ui-base-color, 8%); -} - -.timeline-hint { - text-align: center; - color: $darker-text-color; - padding: 15px; - box-sizing: border-box; - width: 100%; - cursor: default; - - strong { - font-weight: 500; - } - - a { - color: $highlight-text-color; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - color: lighten($highlight-text-color, 4%); - } - } -} - -.missing-indicator { - padding-top: 20px + 48px; - - .regeneration-indicator__figure { - background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg'); - } -} - -.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { - border-top: 1px solid $ui-base-color; -} - -.notification__dismiss-overlay { - overflow: hidden; - position: absolute; - top: 0; - right: 0; - bottom: -1px; - padding-left: 15px; // space for the box shadow to be visible - - z-index: 999; - align-items: center; - justify-content: flex-end; - cursor: pointer; - - display: flex; - - .wrappy { - width: $dismiss-overlay-width; - align-self: stretch; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: lighten($ui-base-color, 8%); - border-left: 1px solid lighten($ui-base-color, 20%); - box-shadow: 0 0 5px black; - border-bottom: 1px solid $ui-base-color; - } - - .ckbox { - border: 2px solid $ui-primary-color; - border-radius: 2px; - width: 30px; - height: 30px; - font-size: 20px; - color: $darker-text-color; - text-shadow: 0 0 5px black; - display: flex; - justify-content: center; - align-items: center; - } - - &:focus { - outline: 0 !important; - - .ckbox { - box-shadow: 0 0 1px 1px $ui-highlight-color; - } - } -} - -.text-btn { - display: inline-block; - padding: 0; - font-family: inherit; - font-size: inherit; - color: inherit; - border: 0; - background: transparent; - cursor: pointer; -} - -.loading-indicator { - color: $dark-text-color; - font-size: 12px; - font-weight: 400; - text-transform: uppercase; - overflow: visible; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: flex; - align-items: center; - justify-content: center; -} - -.circular-progress { - color: lighten($ui-base-color, 26%); - animation: 1.4s linear 0s infinite normal none running simple-rotate; - - circle { - stroke: currentColor; - stroke-dasharray: 80px, 200px; - stroke-dashoffset: 0; - animation: circular-progress 1.4s ease-in-out infinite; - } -} - -@keyframes circular-progress { - 0% { - stroke-dasharray: 1px, 200px; - stroke-dashoffset: 0; - } - - 50% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -15px; - } - - 100% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -125px; - } -} - -@keyframes simple-rotate { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@keyframes spring-rotate-in { - 0% { - transform: rotate(0deg); - } - - 30% { - transform: rotate(-484.8deg); - } - - 60% { - transform: rotate(-316.7deg); - } - - 90% { - transform: rotate(-375deg); - } - - 100% { - transform: rotate(-360deg); - } -} - -@keyframes spring-rotate-out { - 0% { - transform: rotate(-360deg); - } - - 30% { - transform: rotate(124.8deg); - } - - 60% { - transform: rotate(-43.27deg); - } - - 90% { - transform: rotate(15deg); - } - - 100% { - transform: rotate(0deg); - } -} - -.spoiler-button { - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; - z-index: 100; - - &--minified { - display: flex; - left: 4px; - top: 4px; - width: auto; - height: auto; - align-items: center; - } - - &--click-thru { - pointer-events: none; - } - - &--hidden { - display: none; - } - - &__overlay { - display: block; - background: transparent; - width: 100%; - height: 100%; - border: 0; - - &__label { - display: inline-block; - background: rgba($base-overlay-background, 0.5); - border-radius: 8px; - padding: 8px 12px; - color: $primary-text-color; - font-weight: 500; - font-size: 14px; - } - - &:hover, - &:focus, - &:active { - .spoiler-button__overlay__label { - background: rgba($base-overlay-background, 0.8); - } - } - - &:disabled { - .spoiler-button__overlay__label { - background: rgba($base-overlay-background, 0.5); - } - } - } -} - -.setting-toggle { - display: block; - line-height: 24px; -} - -.setting-toggle__label, -.setting-meta__label { - color: $darker-text-color; - display: inline-block; - margin-bottom: 14px; - margin-left: 8px; - vertical-align: middle; -} - -.column-settings__row .radio-button { - display: block; -} - -.setting-meta__label { - float: right; -} - -@keyframes heartbeat { - from { - transform: scale(1); - transform-origin: center center; - animation-timing-function: ease-out; - } - - 10% { - transform: scale(0.91); - animation-timing-function: ease-in; - } - - 17% { - transform: scale(0.98); - animation-timing-function: ease-out; - } - - 33% { - transform: scale(0.87); - animation-timing-function: ease-in; - } - - 45% { - transform: scale(1); - animation-timing-function: ease-out; - } -} - -.pulse-loading { - animation: heartbeat 1.5s ease-in-out infinite both; -} - -.upload-area { - align-items: center; - background: rgba($base-overlay-background, 0.8); - display: flex; - height: 100%; - justify-content: center; - left: 0; - opacity: 0; - position: absolute; - top: 0; - visibility: hidden; - width: 100%; - z-index: 2000; - - * { - pointer-events: none; - } -} - -.upload-area__drop { - width: 320px; - height: 160px; - display: flex; - box-sizing: border-box; - position: relative; - padding: 8px; -} - -.upload-area__background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); -} - -.upload-area__content { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - color: $secondary-text-color; - font-size: 18px; - font-weight: 500; - border: 2px dashed $ui-base-lighter-color; - border-radius: 4px; -} - -.dropdown--active .emoji-button img { - opacity: 1; - filter: none; -} - -.loading-bar { - background-color: $ui-highlight-color; - height: 3px; - position: fixed; - top: 0; - left: 0; - z-index: 9999; -} - -.icon-badge-wrapper { - position: relative; -} - -.icon-badge { - position: absolute; - display: block; - right: -.25em; - top: -.25em; - background-color: $ui-highlight-color; - border-radius: 50%; - font-size: 75%; - width: 1em; - height: 1em; -} - -.conversation { - display: flex; - border-bottom: 1px solid lighten($ui-base-color, 8%); - padding: 5px; - padding-bottom: 0; - - &:focus { - background: lighten($ui-base-color, 2%); - outline: 0; - } - - &__avatar { - flex: 0 0 auto; - padding: 10px; - padding-top: 12px; - position: relative; - cursor: pointer; - } - - &__unread { - display: inline-block; - background: $highlight-text-color; - border-radius: 50%; - width: 0.625rem; - height: 0.625rem; - margin: -.1ex .15em .1ex; - } - - &__content { - flex: 1 1 auto; - padding: 10px 5px; - padding-right: 15px; - overflow: hidden; - - &__info { - overflow: hidden; - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - } - - &__relative-time { - font-size: 15px; - color: $darker-text-color; - padding-left: 15px; - } - - &__names { - color: $darker-text-color; - font-size: 15px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 4px; - flex-basis: 90px; - flex-grow: 1; - - a { - color: $primary-text-color; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - .status__content { - margin: 0; - } - } - - &--unread { - background: lighten($ui-base-color, 2%); - - &:focus { - background: lighten($ui-base-color, 4%); - } - - .conversation__content__info { - font-weight: 700; - } - - .conversation__content__relative-time { - color: $primary-text-color; - } - } -} - -.ui .flash-message { - margin-top: 10px; - margin-left: auto; - margin-right: auto; - margin-bottom: 0; - min-width: 75%; -} - -::-webkit-scrollbar-thumb { - border-radius: 0; -} - -noscript { - text-align: center; - - img { - width: 200px; - opacity: 0.5; - animation: flicker 4s infinite; - } - - div { - font-size: 14px; - margin: 30px auto; - color: $secondary-text-color; - max-width: 400px; - - a { - color: $highlight-text-color; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } - - a { - word-break: break-word; - } - } -} - -@keyframes flicker { - 0% { opacity: 1; } - 30% { opacity: 0.75; } - 100% { opacity: 1; } -} - +@import 'misc'; @import 'boost'; @import 'accounts'; @import 'domains'; diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index db2b9f154..dee42bfdd 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -11,19 +11,21 @@ max-height: 450px; overflow: hidden; - label, legend { + label, + legend { display: block; font-size: 14px; } - .boolean label, .radio_buttons label { + .boolean label, + .radio_buttons label { position: relative; - padding-left: 28px; + padding-inline-start: 28px; padding-top: 3px; input { position: absolute; - left: 0; + inset-inline-start: 0; top: 0; } } @@ -58,7 +60,7 @@ cursor: pointer; text-decoration: none; outline: none; - transition: background .3s; + transition: background 0.3s; .text-icon-button { color: inherit; @@ -74,7 +76,8 @@ color: $primary-text-color; } - &.close, &.close:hover { + &.close, + &.close:hover { background: $error-value-color; color: $primary-text-color; } @@ -91,7 +94,7 @@ .glitch.local-settings__page { display: block; flex: auto; - padding: 15px 20px 15px 20px; + padding: 15px 20px; width: 360px; overflow-y: auto; } @@ -110,6 +113,10 @@ text-decoration: none; } } + + #mastodon-settings--collapsed-auto-height { + width: calc(4ch + 20px); + } } .glitch.local-settings__page__item.string, @@ -142,7 +149,7 @@ ul { padding: 10px; - margin-left: 12px; + margin-inline-start: 12px; list-style: disc inside; } diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 9776e2265..e1a6ae309 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -49,7 +49,7 @@ color: $primary-text-color; background: rgba($base-overlay-background, 0.5); bottom: 6px; - left: 6px; + inset-inline-start: 6px; padding: 2px 6px; border-radius: 2px; font-size: 11px; @@ -133,7 +133,7 @@ object-fit: cover; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; background: $base-overlay-background; @@ -207,16 +207,16 @@ .media-modal__closer { position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; } .media-modal__navigation { position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; pointer-events: none; transition: opacity 0.3s linear; @@ -259,18 +259,18 @@ } .media-modal__nav--left { - left: 0; + inset-inline-start: 0; } .media-modal__nav--right { - right: 0; + inset-inline-end: 0; } .media-modal__overlay { max-width: 600px; position: absolute; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; margin: 0 auto; @@ -348,7 +348,7 @@ padding: 0; border: 0; font-size: 0; - transition: opacity .2s ease-in-out; + transition: opacity 0.2s ease-in-out; &.active { opacity: 1; @@ -357,7 +357,7 @@ .media-modal__close { position: absolute; - right: 8px; + inset-inline-end: 8px; top: 8px; z-index: 100; } @@ -372,7 +372,6 @@ .video-player__volume__handle { bottom: 23px; } - } .audio-player { @@ -503,13 +502,18 @@ 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 .1s ease; + transition: opacity 0.1s ease; &.active { opacity: 1; @@ -527,7 +531,7 @@ display: none; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; z-index: 4; @@ -591,7 +595,6 @@ .player-button { display: inline-block; outline: 0; - flex: 0 0 auto; background: transparent; padding: 5px; @@ -651,18 +654,18 @@ &.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%); } @@ -672,7 +675,7 @@ position: absolute; height: 4px; border-radius: 4px; - left: 0; + inset-inline-start: 0; top: 50%; transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); @@ -685,8 +688,8 @@ width: 12px; height: 12px; top: 50%; - left: 0; - margin-left: -6px; + inset-inline-start: 0; + margin-inline-start: -6px; transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -725,7 +728,7 @@ position: relative; &::before { - content: ""; + content: ''; width: 100%; background: rgba($white, 0.35); border-radius: 4px; @@ -757,12 +760,12 @@ 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); .no-reduce-motion & { - transition: opacity .1s ease; + transition: opacity 0.1s ease; } &.active { diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss deleted file mode 100644 index e69de29bb..000000000 --- a/app/javascript/flavours/glitch/styles/components/metadata.scss +++ /dev/null diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss new file mode 100644 index 000000000..627500115 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -0,0 +1,1816 @@ +.app-body { + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; +} + +.animated-number { + display: inline-flex; + flex-direction: column; + align-items: stretch; + overflow: hidden; + position: relative; +} + +.link-button { + display: block; + font-size: 15px; + line-height: 20px; + color: $highlight-text-color; + border: 0; + background: transparent; + padding: 0; + cursor: pointer; + text-decoration: none; + + &--destructive { + color: $error-value-color; + } + + &:hover, + &:active { + text-decoration: underline; + } + + &:disabled { + color: $ui-primary-color; + cursor: default; + } +} + +.button { + background-color: darken($ui-highlight-color, 3%); + border: 10px none; + border-radius: 4px; + box-sizing: border-box; + color: $primary-text-color; + cursor: pointer; + display: inline-block; + font-family: inherit; + font-size: 15px; + font-weight: 500; + letter-spacing: 0; + line-height: 22px; + overflow: hidden; + padding: 7px 18px; + position: relative; + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + width: auto; + + &:active, + &:focus, + &:hover { + background-color: $ui-highlight-color; + } + + &--destructive { + &:active, + &:focus, + &:hover { + background-color: $error-red; + transition: none; + } + } + + &:disabled { + background-color: $ui-primary-color; + cursor: default; + } + + &.button-alternative { + color: $inverted-text-color; + background: $ui-primary-color; + + &:active, + &:focus, + &:hover { + background-color: lighten($ui-primary-color, 4%); + } + } + + &.button-alternative-2 { + background: $ui-base-lighter-color; + + &:active, + &:focus, + &:hover { + background-color: lighten($ui-base-lighter-color, 4%); + } + } + + &.button-secondary { + font-size: 16px; + line-height: 36px; + height: auto; + color: $darker-text-color; + text-transform: none; + background: transparent; + padding: 6px 17px; + border: 1px solid $ui-primary-color; + + &:active, + &:focus, + &:hover { + border-color: lighten($ui-primary-color, 4%); + color: lighten($darker-text-color, 4%); + text-decoration: none; + } + + &:disabled { + opacity: 0.5; + } + } + + &.button-tertiary { + background: transparent; + padding: 6px 17px; + color: $highlight-text-color; + border: 1px solid $highlight-text-color; + + &:active, + &:focus, + &:hover { + background: $ui-highlight-color; + color: $primary-text-color; + border: 0; + padding: 7px 18px; + } + + &:disabled { + opacity: 0.5; + } + + &.button--confirmation { + color: $valid-value-color; + border-color: $valid-value-color; + + &:active, + &:focus, + &:hover { + background: $valid-value-color; + color: $primary-text-color; + } + } + + &.button--destructive { + color: $error-value-color; + border-color: $error-value-color; + + &:active, + &:focus, + &:hover { + background: $error-value-color; + color: $primary-text-color; + } + } + } + + &.button--block { + display: block; + width: 100%; + } + + .layout-multiple-columns &.button--with-bell { + font-size: 12px; + padding: 0 8px; + } +} + +.icon-button { + display: inline-block; + padding: 0; + color: $action-button-color; + border: 0; + border-radius: 4px; + background: transparent; + cursor: pointer; + transition: all 100ms ease-in; + transition-property: background-color, color; + text-decoration: none; + + a { + color: inherit; + text-decoration: none; + } + + &:hover, + &:active, + &:focus { + color: lighten($action-button-color, 7%); + background-color: rgba($action-button-color, 0.15); + transition: all 200ms ease-out; + transition-property: background-color, color; + } + + &:focus { + background-color: rgba($action-button-color, 0.3); + } + + &.disabled { + color: darken($action-button-color, 13%); + background-color: transparent; + cursor: default; + } + + &.active { + color: $highlight-text-color; + } + + &.copyable { + transition: background 300ms linear; + } + + &.copied { + background: $valid-value-color; + transition: none; + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &.inverted { + color: $lighter-text-color; + + &:hover, + &:active, + &:focus { + color: darken($lighter-text-color, 7%); + background-color: rgba($lighter-text-color, 0.15); + } + + &:focus { + background-color: rgba($lighter-text-color, 0.3); + } + + &.disabled { + color: lighten($lighter-text-color, 7%); + background-color: transparent; + } + + &.active { + color: $highlight-text-color; + + &.disabled { + color: lighten($highlight-text-color, 13%); + } + } + } + + &.overlayed { + box-sizing: content-box; + background: rgba($base-overlay-background, 0.6); + color: rgba($primary-text-color, 0.7); + border-radius: 4px; + padding: 2px; + + &:hover { + background: rgba($base-overlay-background, 0.9); + } + } + + &--with-counter { + display: inline-flex; + align-items: center; + width: auto !important; + padding: 0; + padding-inline-end: 4px; + padding-inline-start: 2px; + } + + &__counter { + display: inline-block; + width: auto; + margin-inline-start: 4px; + font-size: 12px; + font-weight: 500; + } +} + +.text-icon, +.text-icon-button { + font-weight: 600; + font-size: 11px; + line-height: 27px; + cursor: default; +} + +.text-icon-button { + color: $lighter-text-color; + border: 0; + border-radius: 4px; + background: transparent; + cursor: pointer; + padding: 0 3px; + outline: 0; + transition: all 100ms ease-in; + transition-property: background-color, color; + + &:hover, + &:active, + &:focus { + color: darken($lighter-text-color, 7%); + background-color: rgba($lighter-text-color, 0.15); + transition: all 200ms ease-out; + transition-property: background-color, color; + } + + &:focus { + background-color: rgba($lighter-text-color, 0.3); + } + + &.disabled { + color: lighten($lighter-text-color, 20%); + background-color: transparent; + cursor: default; + } + + &.active { + color: $highlight-text-color; + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } +} + +body > [data-popper-placement] { + z-index: 3; +} + +.invisible { + font-size: 0; + line-height: 0; + display: inline-block; + width: 0; + height: 0; + position: absolute; + + img, + svg { + margin: 0 !important; + border: 0 !important; + padding: 0 !important; + width: 0 !important; + height: 0 !important; + } +} + +.ellipsis { + &::after { + content: '…'; + } +} + +.notification__favourite-icon-wrapper { + inset-inline-start: 0; + position: absolute; + + .fa.star-icon { + color: $gold-star; + } +} + +.icon-button.star-icon.active { + color: $gold-star; +} + +.icon-button.bookmark-icon.active { + color: $red-bookmark; +} + +.no-reduce-motion .icon-button.star-icon { + &.activate { + & > .fa-star { + animation: spring-rotate-in 1s linear; + } + } + + &.deactivate { + & > .fa-star { + animation: spring-rotate-out 1s linear; + } + } +} + +.notification__display-name { + color: inherit; + font-weight: 500; + text-decoration: none; + + &:hover { + color: $primary-text-color; + text-decoration: underline; + } +} + +.display-name { + display: block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + a { + color: inherit; + text-decoration: inherit; + } + + strong { + display: block; + } + + > a:hover { + strong { + text-decoration: underline; + } + } + + &.inline { + padding: 0; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + strong { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + + span { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + } +} + +.display-name__html { + font-weight: 500; +} + +.display-name__account { + font-size: 14px; +} + +.image-loader { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE 10+ */ + + * { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE 10+ */ + } + + &::-webkit-scrollbar, + *::-webkit-scrollbar { + width: 0; + height: 0; + background: transparent; /* Chrome/Safari/Webkit */ + } + + .image-loader__preview-canvas { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + background: url('~images/void.png') repeat; + object-fit: contain; + } + + .loading-bar__container { + position: relative; + } + + .loading-bar { + position: absolute; + } + + &.image-loader--amorphous .image-loader__preview-canvas { + display: none; + } +} + +.zoomable-image { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + + img { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + width: auto; + height: auto; + object-fit: contain; + } +} + +.dropdown-animation { + animation: dropdown 300ms cubic-bezier(0.1, 0.7, 0.1, 1); + + @keyframes dropdown { + from { + opacity: 0; + transform: scaleX(0.85) scaleY(0.75); + } + + to { + opacity: 1; + transform: scaleX(1) scaleY(1); + } + } + + &.top { + transform-origin: bottom; + } + + &.right { + transform-origin: left; + } + + &.bottom { + transform-origin: top; + } + + &.left { + transform-origin: right; + } + + .reduce-motion & { + animation: none; + } +} + +.dropdown { + display: inline-block; +} + +.dropdown__content { + display: none; + position: absolute; +} + +.dropdown-menu__separator { + border-bottom: 1px solid darken($ui-secondary-color, 8%); + margin: 5px 7px 6px; + height: 0; +} + +.dropdown-menu { + background: $ui-secondary-color; + padding: 4px 0; + border-radius: 4px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + z-index: 9999; + + &__text-button { + display: inline; + color: inherit; + background: transparent; + border: 0; + margin: 0; + padding: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + + &:focus { + outline: 1px dotted; + } + } + + &__container { + &__header { + border-bottom: 1px solid darken($ui-secondary-color, 8%); + padding: 4px 14px; + padding-bottom: 8px; + font-size: 13px; + line-height: 18px; + color: $inverted-text-color; + } + + &__list { + list-style: none; + + &--scrollable { + max-height: 300px; + overflow-y: scroll; + } + } + + &--loading { + display: flex; + align-items: center; + justify-content: center; + padding: 30px 45px; + } + } +} + +.dropdown-menu__arrow { + position: absolute; + + &::before { + content: ''; + display: block; + width: 14px; + height: 5px; + background-color: $ui-secondary-color; + mask-image: url("data:image/svg+xml;utf8,<svg width='14' height='5' xmlns='http://www.w3.org/2000/svg'><path d='M7 0L0 5h14L7 0z' fill='white'/></svg>"); + } + + &.top { + bottom: -5px; + + &::before { + transform: rotate(180deg); + } + } + + &.right { + inset-inline-start: -9px; + + &::before { + transform: rotate(-90deg); + } + } + + &.bottom { + top: -5px; + } + + &.left { + inset-inline-end: -9px; + + &::before { + transform: rotate(90deg); + } + } +} + +.dropdown-menu__item { + font-size: 13px; + line-height: 18px; + display: block; + color: $inverted-text-color; + + a, + button { + font-family: inherit; + font-size: inherit; + line-height: inherit; + display: block; + width: 100%; + padding: 4px 14px; + border: 0; + margin: 0; + box-sizing: border-box; + text-decoration: none; + background: $ui-secondary-color; + color: inherit; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: inherit; + + &:focus, + &:hover, + &:active { + background: $ui-highlight-color; + color: $secondary-text-color; + outline: 0; + } + } +} + +.dropdown-menu__item--text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 4px 14px; +} + +.dropdown-menu__item.edited-timestamp__history__item { + border-bottom: 1px solid darken($ui-secondary-color, 8%); + + &:last-child { + border-bottom: 0; + } + + &.dropdown-menu__item--text, + a, + button { + padding: 8px 14px; + } +} + +.inline-account { + display: inline-flex; + align-items: center; + vertical-align: top; + + .account__avatar { + margin-right: 5px; + border-radius: 50%; + } + + strong { + font-weight: 600; + } +} + +.dropdown--active .dropdown__content { + display: block; + line-height: 18px; + max-width: 311px; + inset-inline-end: 0; + text-align: start; + z-index: 9999; + + & > ul { + list-style: none; + background: $ui-secondary-color; + padding: 4px 0; + border-radius: 4px; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); + min-width: 140px; + position: relative; + } + + &.dropdown__right { + inset-inline-end: 0; + } + + &.dropdown__left { + & > ul { + inset-inline-start: -98px; + } + } + + & > ul > li > a { + font-size: 13px; + line-height: 18px; + display: block; + padding: 4px 14px; + box-sizing: border-box; + text-decoration: none; + background: $ui-secondary-color; + color: $inverted-text-color; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:focus { + outline: 0; + } + + &:hover { + background: $ui-highlight-color; + color: $secondary-text-color; + } + } +} + +.dropdown__icon { + vertical-align: middle; +} + +.static-content { + padding: 10px; + padding-top: 20px; + color: $dark-text-color; + + h1 { + font-size: 16px; + font-weight: 500; + margin-bottom: 40px; + text-align: center; + } + + p { + font-size: 13px; + margin-bottom: 20px; + } +} + +.column, +.drawer { + flex: 1 1 100%; + overflow: hidden; +} + +@media screen and (min-width: 631px) { + .columns-area { + padding: 0; + } + + .column, + .drawer { + flex: 0 0 auto; + padding: 10px; + padding-inline-start: 5px; + padding-inline-end: 5px; + + &:first-child { + padding-inline-start: 10px; + } + + &:last-child { + padding-inline-end: 10px; + } + } + + .columns-area > div { + .column, + .drawer { + padding-inline-start: 5px; + padding-inline-end: 5px; + } + } +} + +.tabs-bar { + box-sizing: border-box; + display: flex; + background: lighten($ui-base-color, 8%); + flex: 0 0 auto; + overflow-y: auto; +} + +.tabs-bar__link { + display: block; + flex: 1 1 auto; + padding: 15px 10px; + padding-bottom: 13px; + color: $primary-text-color; + text-decoration: none; + text-align: center; + font-size: 14px; + font-weight: 500; + border-bottom: 2px solid lighten($ui-base-color, 8%); + transition: all 50ms linear; + transition-property: border-bottom, background, color; + + .fa { + font-weight: 400; + font-size: 16px; + } + + &:hover, + &:focus, + &:active { + @include multi-columns('screen and (min-width: 631px)') { + background: lighten($ui-base-color, 14%); + border-bottom-color: lighten($ui-base-color, 14%); + } + } + + &.active { + border-bottom: 2px solid $ui-highlight-color; + color: $highlight-text-color; + } + + span { + margin-inline-start: 5px; + display: none; + } + + span.icon { + margin-inline-start: 0; + display: inline; + } +} + +.icon-with-badge { + position: relative; + + &__badge { + position: absolute; + inset-inline-start: 9px; + top: -13px; + background: $ui-highlight-color; + border: 2px solid lighten($ui-base-color, 8%); + padding: 1px 6px; + border-radius: 6px; + font-size: 10px; + font-weight: 500; + line-height: 14px; + color: $primary-text-color; + } + + &__issue-badge { + position: absolute; + inset-inline-start: 11px; + bottom: 1px; + display: block; + background: $error-red; + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + } +} + +.column-link--transparent .icon-with-badge__badge { + border-color: darken($ui-base-color, 8%); +} + +.scrollable { + overflow-y: scroll; + overflow-x: hidden; + flex: 1 1 auto; + -webkit-overflow-scrolling: touch; + + &.optionally-scrollable { + overflow-y: auto; + } + + @supports (display: grid) { + // hack to fix Chrome <57 + contain: strict; + } + + &--flex { + display: flex; + flex-direction: column; + } + + &__append { + flex: 1 1 auto; + position: relative; + min-height: 120px; + } + + .scrollable { + flex: 1 1 auto; + } +} + +.scrollable.fullscreen { + @supports (display: grid) { + // hack to fix Chrome <57 + contain: none; + } +} + +.react-toggle { + display: inline-block; + position: relative; + cursor: pointer; + background-color: transparent; + border: 0; + padding: 0; + user-select: none; + -webkit-tap-highlight-color: rgba($base-overlay-background, 0); + -webkit-tap-highlight-color: transparent; +} + +.react-toggle-screenreader-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.react-toggle--disabled { + cursor: not-allowed; + opacity: 0.5; + transition: opacity 0.25s; +} + +.react-toggle-track { + width: 50px; + height: 24px; + padding: 0; + border-radius: 30px; + background-color: $ui-base-color; + transition: background-color 0.2s ease; +} + +.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { + background-color: darken($ui-base-color, 10%); +} + +.react-toggle--checked .react-toggle-track { + background-color: darken($ui-highlight-color, 2%); +} + +.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { + background-color: $ui-highlight-color; +} + +.react-toggle-track-check { + position: absolute; + width: 14px; + height: 10px; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + inset-inline-start: 8px; + opacity: 0; + transition: opacity 0.25s ease; +} + +.react-toggle--checked .react-toggle-track-check { + opacity: 1; + transition: opacity 0.25s ease; +} + +.react-toggle-track-x { + position: absolute; + width: 10px; + height: 10px; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + inset-inline-end: 10px; + opacity: 1; + transition: opacity 0.25s ease; +} + +.react-toggle--checked .react-toggle-track-x { + opacity: 0; +} + +.react-toggle-thumb { + position: absolute; + top: 1px; + inset-inline-start: 1px; + width: 22px; + height: 22px; + border: 1px solid $ui-base-color; + border-radius: 50%; + background-color: darken($simple-background-color, 2%); + box-sizing: border-box; + transition: all 0.25s ease; + transition-property: border-color, left; +} + +.react-toggle--checked .react-toggle-thumb { + inset-inline-start: 27px; + border-color: $ui-highlight-color; +} + +.getting-started__wrapper, +.getting_started, +.flex-spacer { + background: $ui-base-color; +} + +.getting-started__wrapper { + position: relative; + overflow-y: auto; +} + +.flex-spacer { + flex: 1 1 auto; +} + +.getting-started { + background: $ui-base-color; + flex: 1 0 auto; + + p { + color: $secondary-text-color; + } + + a { + color: $dark-text-color; + } + + &__trends { + flex: 0 1 auto; + opacity: 1; + animation: fade 150ms linear; + margin-top: 10px; + + h4 { + border-bottom: 1px solid lighten($ui-base-color, 8%); + padding: 10px; + font-size: 12px; + text-transform: uppercase; + font-weight: 500; + + a { + color: $darker-text-color; + text-decoration: none; + } + } + + @media screen and (max-height: 810px) { + .trends__item:nth-of-type(3) { + display: none; + } + } + + @media screen and (max-height: 720px) { + .trends__item:nth-of-type(2) { + display: none; + } + } + + @media screen and (max-height: 670px) { + display: none; + } + + .trends__item { + border-bottom: 0; + padding: 10px; + + &__current { + color: $darker-text-color; + } + } + } +} + +.column-link__badge { + display: inline-block; + border-radius: 4px; + font-size: 12px; + line-height: 19px; + font-weight: 500; + background: $ui-base-color; + padding: 4px 8px; + margin: -6px 10px; +} + +.keyboard-shortcuts { + padding: 8px 0 0; + overflow: hidden; + + thead { + position: absolute; + inset-inline-start: -9999px; + } + + td { + padding: 0 10px 8px; + } + + kbd { + display: inline-block; + padding: 3px 5px; + background-color: lighten($ui-base-color, 8%); + border: 1px solid darken($ui-base-color, 4%); + } +} + +.setting-text { + color: $darker-text-color; + background: transparent; + border: 0; + border-bottom: 2px solid $ui-primary-color; + outline: 0; + box-sizing: border-box; + display: block; + font-family: inherit; + margin-bottom: 10px; + padding: 7px 0; + width: 100%; + + &:focus, + &:active { + color: $primary-text-color; + border-bottom-color: $ui-highlight-color; + } + + @include limited-single-column('screen and (max-width: 600px)') { + font-size: 16px; + } + + &.light { + color: $inverted-text-color; + border-bottom: 2px solid lighten($ui-base-color, 27%); + + &:focus, + &:active { + color: $inverted-text-color; + border-bottom-color: $ui-highlight-color; + } + } +} + +button.icon-button i.fa-retweet { + background-position: 0 0; + height: 19px; + transition: background-position 0.9s steps(10); + transition-duration: 0s; + vertical-align: middle; + width: 22px; + + &::before { + display: none !important; + } +} + +button.icon-button.active i.fa-retweet { + transition-duration: 0.9s; + background-position: 0 100%; +} + +.reduce-motion button.icon-button i.fa-retweet, +.reduce-motion button.icon-button.active i.fa-retweet { + transition: none; +} + +.reduce-motion button.icon-button.disabled i.fa-retweet { + color: darken($action-button-color, 13%); +} + +.load-more { + display: block; + color: $dark-text-color; + background-color: transparent; + border: 0; + font-size: inherit; + text-align: center; + line-height: inherit; + margin: 0; + padding: 15px; + box-sizing: border-box; + width: 100%; + clear: both; + text-decoration: none; + + &:hover { + background: lighten($ui-base-color, 2%); + } +} + +.load-gap { + border-bottom: 1px solid lighten($ui-base-color, 8%); +} + +.timeline-hint { + text-align: center; + color: $darker-text-color; + padding: 15px; + box-sizing: border-box; + width: 100%; + cursor: default; + + strong { + font-weight: 500; + } + + a { + color: $highlight-text-color; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + color: lighten($highlight-text-color, 4%); + } + } +} + +.missing-indicator { + padding-top: 20px + 48px; + + .regeneration-indicator__figure { + background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg'); + } +} + +.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { + border-top: 1px solid $ui-base-color; +} + +.notification__dismiss-overlay { + overflow: hidden; + position: absolute; + top: 0; + inset-inline-end: 0; + bottom: -1px; + padding-inline-start: 15px; // space for the box shadow to be visible + z-index: 999; + align-items: center; + justify-content: flex-end; + cursor: pointer; + display: flex; + + .wrappy { + width: $dismiss-overlay-width; + align-self: stretch; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: lighten($ui-base-color, 8%); + border-inline-start: 1px solid lighten($ui-base-color, 20%); + box-shadow: 0 0 5px black; + border-bottom: 1px solid $ui-base-color; + } + + .ckbox { + border: 2px solid $ui-primary-color; + border-radius: 2px; + width: 30px; + height: 30px; + font-size: 20px; + color: $darker-text-color; + text-shadow: 0 0 5px black; + display: flex; + justify-content: center; + align-items: center; + } + + &:focus { + outline: 0 !important; + + .ckbox { + box-shadow: 0 0 1px 1px $ui-highlight-color; + } + } +} + +.text-btn { + display: inline-block; + padding: 0; + font-family: inherit; + font-size: inherit; + color: inherit; + border: 0; + background: transparent; + cursor: pointer; +} + +.loading-indicator { + color: $dark-text-color; + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + overflow: visible; + position: absolute; + top: 50%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); + display: flex; + align-items: center; + justify-content: center; +} + +.circular-progress { + color: lighten($ui-base-color, 26%); + animation: 1.4s linear 0s infinite normal none running simple-rotate; + + circle { + stroke: currentColor; + stroke-dasharray: 80px, 200px; + stroke-dashoffset: 0; + animation: circular-progress 1.4s ease-in-out infinite; + } +} + +@keyframes circular-progress { + 0% { + stroke-dasharray: 1px, 200px; + stroke-dashoffset: 0; + } + + 50% { + stroke-dasharray: 100px, 200px; + stroke-dashoffset: -15px; + } + + 100% { + stroke-dasharray: 100px, 200px; + stroke-dashoffset: -125px; + } +} + +@keyframes simple-rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes spring-rotate-in { + 0% { + transform: rotate(0deg); + } + + 30% { + transform: rotate(-484.8deg); + } + + 60% { + transform: rotate(-316.7deg); + } + + 90% { + transform: rotate(-375deg); + } + + 100% { + transform: rotate(-360deg); + } +} + +@keyframes spring-rotate-out { + 0% { + transform: rotate(-360deg); + } + + 30% { + transform: rotate(124.8deg); + } + + 60% { + transform: rotate(-43.27deg); + } + + 90% { + transform: rotate(15deg); + } + + 100% { + transform: rotate(0deg); + } +} + +.spoiler-button { + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + position: absolute; + z-index: 100; + + &--minified { + display: flex; + inset-inline-start: 4px; + top: 4px; + width: auto; + height: auto; + align-items: center; + } + + &--click-thru { + pointer-events: none; + } + + &--hidden { + display: none; + } + + &__overlay { + display: block; + background: transparent; + width: 100%; + height: 100%; + border: 0; + + &__label { + display: inline-block; + background: rgba($base-overlay-background, 0.5); + border-radius: 8px; + padding: 8px 12px; + color: $primary-text-color; + font-weight: 500; + font-size: 14px; + } + + &:hover, + &:focus, + &:active { + .spoiler-button__overlay__label { + background: rgba($base-overlay-background, 0.8); + } + } + + &:disabled { + .spoiler-button__overlay__label { + background: rgba($base-overlay-background, 0.5); + } + } + } +} + +.setting-toggle { + display: block; + line-height: 24px; +} + +.setting-toggle__label, +.setting-meta__label { + color: $darker-text-color; + display: inline-block; + margin-bottom: 14px; + margin-inline-start: 8px; + vertical-align: middle; +} + +.column-settings__row .radio-button { + display: block; +} + +.setting-meta__label { + float: right; +} + +@keyframes heartbeat { + 0% { + transform: scale(1); + transform-origin: center center; + animation-timing-function: ease-out; + } + + 10% { + transform: scale(0.91); + animation-timing-function: ease-in; + } + + 17% { + transform: scale(0.98); + animation-timing-function: ease-out; + } + + 33% { + transform: scale(0.87); + animation-timing-function: ease-in; + } + + 45% { + transform: scale(1); + animation-timing-function: ease-out; + } +} + +.pulse-loading { + animation: heartbeat 1.5s ease-in-out infinite both; +} + +.upload-area { + align-items: center; + background: rgba($base-overlay-background, 0.8); + display: flex; + height: 100vh; + justify-content: center; + inset-inline-start: 0; + opacity: 0; + position: fixed; + top: 0; + visibility: hidden; + width: 100vw; + z-index: 2000; + + * { + pointer-events: none; + } +} + +.upload-area__drop { + width: 320px; + height: 160px; + display: flex; + box-sizing: border-box; + position: relative; + padding: 8px; +} + +.upload-area__background { + position: absolute; + top: 0; + inset-inline-end: 0; + bottom: 0; + inset-inline-start: 0; + z-index: -1; + border-radius: 4px; + background: $ui-base-color; + box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); +} + +.upload-area__content { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: $secondary-text-color; + font-size: 18px; + font-weight: 500; + border: 2px dashed $ui-base-lighter-color; + border-radius: 4px; +} + +.dropdown--active .emoji-button img { + opacity: 1; + filter: none; +} + +.loading-bar { + background-color: $ui-highlight-color; + height: 3px; + position: fixed; + top: 0; + inset-inline-start: 0; + z-index: 9999; +} + +.icon-badge-wrapper { + position: relative; +} + +.icon-badge { + position: absolute; + display: block; + inset-inline-end: -0.25em; + top: -0.25em; + background-color: $ui-highlight-color; + border-radius: 50%; + font-size: 75%; + width: 1em; + height: 1em; +} + +.conversation { + display: flex; + border-bottom: 1px solid lighten($ui-base-color, 8%); + padding: 5px; + padding-bottom: 0; + + &:focus { + background: lighten($ui-base-color, 2%); + outline: 0; + } + + &__avatar { + flex: 0 0 auto; + padding: 10px; + padding-top: 12px; + position: relative; + cursor: pointer; + } + + &__unread { + display: inline-block; + background: $highlight-text-color; + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + margin: -0.1ex 0.15em 0.1ex; + } + + &__content { + flex: 1 1 auto; + padding: 10px 5px; + padding-right: 15px; + overflow: hidden; + + &__info { + overflow: hidden; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + } + + &__relative-time { + font-size: 15px; + color: $darker-text-color; + padding-inline-start: 15px; + } + + &__names { + color: $darker-text-color; + font-size: 15px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 4px; + flex-basis: 90px; + flex-grow: 1; + + a { + color: $primary-text-color; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } + + .status__content { + margin: 0; + } + } + + &--unread { + background: lighten($ui-base-color, 2%); + + &:focus { + background: lighten($ui-base-color, 4%); + } + + .conversation__content__info { + font-weight: 700; + } + + .conversation__content__relative-time { + color: $primary-text-color; + } + } +} + +.ui .flash-message { + margin-top: 10px; + margin-inline-start: auto; + margin-inline-end: auto; + margin-bottom: 0; + min-width: 75%; +} + +::-webkit-scrollbar-thumb { + border-radius: 0; +} + +noscript { + text-align: center; + + img { + width: 200px; + opacity: 0.5; + animation: flicker 4s infinite; + } + + div { + font-size: 14px; + margin: 30px auto; + color: $secondary-text-color; + max-width: 400px; + + a { + color: $highlight-text-color; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + + a { + word-break: break-word; + } + } +} + +@keyframes flicker { + 0% { + opacity: 1; + } + + 30% { + opacity: 0.75; + } + + 100% { + opacity: 1; + } +} diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 972e01e7d..354e5a04f 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -10,8 +10,8 @@ .modal-root__overlay { position: fixed; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; background: rgba($base-overlay-background, 0.7); transition: background 0.5s; @@ -20,7 +20,7 @@ .modal-root__container { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; @@ -41,7 +41,7 @@ .media-modal__zoom-button { position: absolute; - right: 64px; + inset-inline-end: 64px; top: 8px; z-index: 100; pointer-events: auto; @@ -75,7 +75,6 @@ width: 100%; height: 100%; box-sizing: border-box; - display: none; flex-direction: column; align-items: center; justify-content: center; @@ -94,12 +93,11 @@ & > div { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 25px; - display: none; flex-direction: column; align-items: center; justify-content: center; @@ -269,7 +267,8 @@ } .onboarding-modal__page__wrapper-0 { - background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px; + background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / + auto 250px; height: 100%; padding: 0; } @@ -293,8 +292,8 @@ } &__extra { - padding-right: 65px; - padding-left: 185px; + padding-inline-end: 65px; + padding-inline-start: 185px; text-align: center; } } @@ -326,7 +325,7 @@ .onboarding-modal__page-four, .onboarding-modal__page-five { p { - text-align: left; + text-align: start; } .figure { @@ -346,7 +345,7 @@ &.non-interactive { pointer-events: none; - text-align: left; + text-align: start; } } } @@ -361,11 +360,11 @@ margin: 0 10px; &:first-child { - margin-left: 0; + margin-inline-start: 0; } &:last-child { - margin-right: 0; + margin-inline-end: 0; } p { @@ -411,7 +410,7 @@ display: inline-block; max-width: 30px; max-height: auto; - margin-left: 10px; + margin-inline-start: 10px; } .boost-modal, @@ -498,9 +497,9 @@ & > div { flex: 1 1 auto; - text-align: right; + text-align: end; color: $lighter-text-color; - padding-right: 10px; + padding-inline-end: 10px; } .button { @@ -684,7 +683,6 @@ display: block; box-sizing: border-box; width: 100%; - margin: 0; color: $inverted-text-color; background: $simple-background-color; padding: 10px; @@ -713,7 +711,7 @@ & > span { font-size: 17px; font-weight: 500; - margin-left: 10px; + margin-inline-start: 10px; } } @@ -737,11 +735,11 @@ } .emoji-mart-search { - padding-right: 10px; + padding-inline-end: 10px; } .emoji-mart-search-icon { - right: 10px + 5px; + inset-inline-end: 10px + 5px; } } @@ -799,7 +797,7 @@ .report-modal__comment { padding: 20px; - border-right: 1px solid $ui-secondary-color; + border-inline-end: 1px solid $ui-secondary-color; max-width: 320px; p { @@ -819,7 +817,6 @@ font-family: inherit; font-size: 14px; resize: none; - border: 0; outline: 0; border-radius: 4px; border: 1px solid $ui-secondary-color; @@ -950,7 +947,7 @@ & > .react-toggle, & > .icon, button:first-child { - margin-right: 10px; + margin-inline-end: 10px; } } } @@ -983,13 +980,13 @@ } .confirmation-modal__do_not_ask_again { - padding-left: 20px; - padding-right: 20px; + padding-inline-start: 20px; + padding-inline-end: 20px; padding-bottom: 10px; - font-size: 14px; - label, input { + label, + input { vertical-align: middle; } } @@ -1020,11 +1017,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; } } @@ -1048,7 +1047,7 @@ &__label { color: $inverted-text-color; margin: 0; - margin-left: 8px; + margin-inline-start: 8px; } } } @@ -1059,7 +1058,7 @@ .report-modal__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } } @@ -1071,6 +1070,7 @@ &__container { padding: 30px; pointer-events: all; + overflow-y: auto; } .status__content { @@ -1130,7 +1130,7 @@ width: 100%; border: 0; padding: 10px; - font-family: 'mastodon-font-monospace', monospace; + font-family: mastodon-font-monospace, monospace; background: $ui-base-color; color: $primary-text-color; font-size: 14px; @@ -1204,13 +1204,13 @@ width: 100%; height: 100%; top: 0; - left: 0; + inset-inline-start: 0; } &__preview { position: absolute; bottom: 10px; - right: 10px; + inset-inline-end: 10px; z-index: 2; cursor: move; transition: opacity 0.1s ease; @@ -1270,7 +1270,7 @@ ul { padding: 10px; - margin-left: 12px; + margin-inline-start: 12px; list-style: disc inside; } @@ -1279,7 +1279,7 @@ text-decoration: none; &:hover { - text-decoration: underline + text-decoration: underline; } } } diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss index 96cf06742..cab78402b 100644 --- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss +++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss @@ -26,11 +26,13 @@ img { margin-top: 2em; margin-bottom: 2em; + max-width: 100%; } video { margin-top: 2em; margin-bottom: 2em; + max-width: 100%; } figure { @@ -85,27 +87,27 @@ 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 { diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index b8078bdb6..f93e14d76 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -4,11 +4,11 @@ } .search__input { - @include search-input(); + @include search-input; display: block; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; line-height: 18px; font-size: 16px; @@ -44,7 +44,7 @@ .fa { position: absolute; top: 16px; - right: 10px; + inset-inline-end: 10px; z-index: 2; display: inline-block; opacity: 0; @@ -98,7 +98,7 @@ .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -120,7 +120,7 @@ .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -170,7 +170,7 @@ flex: 0 0 auto; font-size: 24px; font-weight: 500; - text-align: right; + text-align: end; color: $secondary-text-color; text-decoration: none; } @@ -181,7 +181,7 @@ path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 100% !important; + fill-opacity: 1 !important; } path:last-child { diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.scss index 67b01c886..c77515eb7 100644 --- a/app/javascript/flavours/glitch/styles/components/sensitive.scss +++ b/app/javascript/flavours/glitch/styles/components/sensitive.scss @@ -4,7 +4,7 @@ align-items: center; position: absolute; top: 4px; - left: 4px; + inset-inline-start: 4px; z-index: 100; } @@ -17,8 +17,10 @@ font-size: 12px; line-height: 18px; text-transform: uppercase; - opacity: .9; - transition: opacity .1s ease; + opacity: 0.9; + transition: opacity 0.1s ease; - .media-gallery:hover & { opacity: 1 } + .media-gallery:hover & { + opacity: 1; + } } diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss index efb49305d..18492983e 100644 --- a/app/javascript/flavours/glitch/styles/components/signed_out.scss +++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss @@ -101,7 +101,7 @@ } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .spacer { diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 74e5d0884..6563fa47b 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -30,7 +30,7 @@ line-height: 18px; font-size: 16px; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; } .search__icon .fa { @@ -130,7 +130,7 @@ line-height: 18px; font-size: 16px; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; } .search__icon .fa { @@ -140,7 +140,7 @@ .scrollable { overflow: visible; - @supports(display: grid) { + @supports (display: grid) { contain: content; } } @@ -174,11 +174,12 @@ } .notification__report { - padding: 15px 15px 15px (48px + 15px * 2); + padding: 15px; + padding-inline-start: (48px + 15px * 2); min-height: 48px + 2px; &__avatar { - left: 15px; + inset-inline-start: 15px; top: 17px; } } @@ -265,7 +266,7 @@ .navigation-panel { margin: 0; background: $ui-base-color; - border-left: 1px solid lighten($ui-base-color, 8%); + border-inline-start: 1px solid lighten($ui-base-color, 8%); height: 100vh; } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index a46fb94b2..2b52051e4 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -67,7 +67,8 @@ margin: -3px 0 0; } - p, pre, blockquote { + p, + pre { margin-bottom: 20px; white-space: pre-wrap; unicode-bidi: plaintext; @@ -77,79 +78,6 @@ } } - .status__content__text, - .e-content { - overflow: hidden; - - & > ul, - & > ol { - margin-bottom: 20px; - } - - h1, h2, h3, h4, h5 { - margin-top: 20px; - margin-bottom: 20px; - } - - h1, h2 { - font-weight: 700; - font-size: 1.2em; - } - - h2 { - font-size: 1.1em; - } - - h3, h4, h5 { - font-weight: 500; - } - - blockquote { - padding-left: 10px; - border-left: 3px solid $darker-text-color; - color: $darker-text-color; - white-space: normal; - - p:last-child { - margin-bottom: 0; - } - } - - b, strong { - font-weight: 700; - } - - em, i { - font-style: italic; - } - - sub { - font-size: smaller; - vertical-align: sub; - } - - sup { - font-size: smaller; - vertical-align: super; - } - - ul, ol { - p { - margin: 0; - } - } - - ul { - margin-left: 1em; - list-style-type: disc; - } - - ol { - list-style-type: decimal; - list-style-position: inside; - } - } - a { color: $secondary-text-color; text-decoration: none; @@ -236,9 +164,10 @@ .status__content__spoiler-icon { display: inline-block; - margin: 0 0 0 5px; - border-left: 1px solid currentColor; - padding: 0 0 0 4px; + margin-inline-start: 5px; + border-inline-start: 1px solid currentColor; + padding: 0; + padding-inline-start: 4px; font-size: 16px; vertical-align: -2px; } @@ -267,7 +196,7 @@ } .status__prepend-icon-wrapper { - left: -26px; + inset-inline-start: -26px; position: absolute; } @@ -313,12 +242,17 @@ @supports (-ms-overflow-style: -ms-autohiding-scrollbar) { // Add margin to avoid Edge auto-hiding scrollbar appearing over content. // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px. - padding-right: 28px; // 12px + 16px + padding-inline-end: 28px; // 12px + 16px } @keyframes fade { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } } opacity: 1; @@ -377,13 +311,18 @@ &.has-background::before { display: block; position: absolute; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; top: 0; bottom: 0; - background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); + background-image: linear-gradient( + to bottom, + rgba($base-shadow-color, 0.75), + rgba($base-shadow-color, 0.65) 24px, + rgba($base-shadow-color, 0.8) + ); pointer-events: none; - content: ""; + content: ''; } .display-name:hover .display-name__html { @@ -396,26 +335,37 @@ text-overflow: ellipsis; padding-top: 0; - &:after { - content: ""; + &::after { + content: ''; position: absolute; top: 0; bottom: 0; - left: 0; - right: 0; - background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1)); + inset-inline-start: 0; + inset-inline-end: 0; + background: linear-gradient( + rgba($ui-base-color, 0), + rgba($ui-base-color, 1) + ); pointer-events: none; } - + a:hover { text-decoration: underline; } } - &:focus > .status__content:after { - background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1)); + + &:focus > .status__content::after { + background: linear-gradient( + rgba(lighten($ui-base-color, 4%), 0), + rgba(lighten($ui-base-color, 4%), 1) + ); } - &.status-direct > .status__content:after { - background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1)); + + &.status-direct > .status__content::after { + background: linear-gradient( + rgba(lighten($ui-base-color, 8%), 0), + rgba(lighten($ui-base-color, 8%), 1) + ); } .notification__message { @@ -428,7 +378,7 @@ } .notification__message { - margin: -10px 0px 10px 0; + margin: -10px 0px 10px; a:hover { text-decoration: underline; @@ -450,7 +400,7 @@ display: inline-block; color: $dark-text-color; font-size: 14px; - text-align: right; + text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -491,8 +441,8 @@ .status__visibility-icon, .status__reply-icon, .text-icon { - padding-left: 2px; - padding-right: 2px; + padding-inline-start: 2px; + padding-inline-end: 2px; } .status__collapse-button.active > .fa-angle-double-up { @@ -558,7 +508,7 @@ .status__prepend { margin-top: -2px; margin-bottom: 8px; - margin-left: 58px; + margin-inline-start: 58px; color: $dark-text-color; font-size: 14px; position: relative; @@ -585,10 +535,10 @@ } .status__action-bar-button { - margin-right: 18px; + margin-inline-end: 18px; &.icon-button--with-counter { - margin-right: 14px; + margin-inline-end: 14px; } } @@ -669,7 +619,7 @@ font-weight: 500; font-size: 12px; line-height: 17px; - margin-left: 6px; + margin-inline-start: 6px; } .status__display-name, @@ -740,12 +690,12 @@ a.status__display-name, .detailed-status__display-avatar { float: left; - margin-right: 10px; + margin-inline-end: 10px; } .status__avatar { flex: none; - margin: 0 10px 0 0; + margin-inline-end: 10px; height: 48px; width: 48px; } @@ -798,9 +748,9 @@ a.status__display-name, &__actions { bottom: 0; - left: 0; + inset-inline-start: 0; position: absolute; - right: 0; + inset-inline-end: 0; top: 0; display: flex; justify-content: center; @@ -840,7 +790,8 @@ a.status__display-name, bottom: -1px; } - a .fa, a:hover .fa { + a .fa, + a:hover .fa { color: inherit; } } @@ -858,9 +809,9 @@ a.status-card { cursor: zoom-in; display: block; text-decoration: none; - width: 100%; - height: auto; - margin: 0; + width: 100%; + height: auto; + margin: 0; } .status-card-video { @@ -884,7 +835,8 @@ a.status-card { .status-card__content { flex: 1 1 auto; overflow: hidden; - padding: 14px 14px 14px 8px; + padding: 14px; + padding-inline-start: 8px; } .status-card__description { @@ -910,7 +862,7 @@ a.status-card { position: absolute; transform-origin: 50% 50%; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); } } @@ -977,7 +929,7 @@ a.status-card.compact:hover { object-fit: fill; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; background: $base-overlay-background; @@ -999,7 +951,7 @@ a.status-card.compact:hover { color: $dark-text-color; padding: 8px 18px; cursor: default; - border-right: 1px solid lighten($ui-base-color, 8%); + border-inline-end: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: column; align-items: center; @@ -1014,7 +966,7 @@ a.status-card.compact:hover { &__list { list-style: none; padding: 4px 0; - padding-left: 8px; + padding-inline-start: 8px; display: flex; flex-direction: column; justify-content: center; @@ -1071,14 +1023,13 @@ a.status-card.compact:hover { &.unread { &::before { - content: ""; + content: ''; position: absolute; top: 0; - left: 0; - pointer-events: 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; } } @@ -1087,12 +1038,12 @@ a.status-card.compact:hover { .picture-in-picture { position: fixed; bottom: 20px; - right: 20px; + inset-inline-end: 20px; width: 300px; &.left { - right: unset; - left: 20px; + inset-inline-end: unset; + inset-inline-start: 20px; } &__footer { @@ -1118,7 +1069,7 @@ a.status-card.compact:hover { } .account__avatar { - margin-right: 10px; + margin-inline-end: 10px; } .display-name { |