diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 831efb01e..954a014f3 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -774,6 +774,28 @@ body > [data-popper-placement] { opacity 0.4s ease; } +.compose-form__textarea-icons { + display: block; + position: absolute; + top: 29px; + inset-inline-end: 5px; + bottom: 5px; + overflow: hidden; + + & > .textarea_icon { + display: block; + 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: 0.8; + } +} + .sign-in-banner { padding: 10px; @@ -933,10 +955,6 @@ body > [data-popper-placement] { outline: 0 !important; } } -} - -.status__content { - overflow: visible; .status__content__spoiler { display: none; @@ -947,6 +965,11 @@ body > [data-popper-placement] { } } +.status__content { + // glitch: necessary for fullwidth media options + overflow: visible; +} + .announcements__item__content { word-wrap: break-word; overflow-y: auto; @@ -990,6 +1013,30 @@ body > [data-popper-placement] { } } +.status__content__read-more-button, +.status__content__translate-button { + display: flex; + align-items: center; + font-size: 15px; + line-height: 22px; + color: $highlight-text-color; + border: 0; + background: transparent; + padding: 0; + padding-top: 16px; + text-decoration: none; + + &:hover, + &:active { + text-decoration: underline; + } + + .icon { + width: 15px; + height: 15px; + } +} + .translate-button { margin-top: 16px; font-size: 15px; @@ -1002,7 +1049,7 @@ body > [data-popper-placement] { .status__content__spoiler-link { display: inline-flex; border-radius: 2px; - background: lighten($ui-base-color, 30%); + background: transparent; border: 0; color: $inverted-text-color; font-weight: 700; @@ -1064,14 +1111,6 @@ body > [data-popper-placement] { outline: 0; background: lighten($ui-base-color, 4%); - &.status.status-direct { - background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); - - &.muted { - background: transparent; - } - } - .detailed-status, .detailed-status__action-bar { background: lighten($ui-base-color, 8%); @@ -1105,11 +1144,6 @@ body > [data-popper-placement] { margin-top: 8px; // glitch: reduced margins } - &.status-direct { - background: mix($ui-base-color, $ui-highlight-color, 95%); - border-bottom-color: lighten($ui-base-color, 12%); - } - &.light { .status__relative-time, .status__visibility-icon { @@ -1157,6 +1191,10 @@ body > [data-popper-placement] { margin-inline-start: $thread-margin; width: calc(100% - ($thread-margin)); } + + .status__content__read-more-button { + margin-inline-start: $thread-margin; + } } &--first-in-thread { @@ -1256,6 +1294,7 @@ body > [data-popper-placement] { ); } + // TODO: review &.status-direct > .status__content::after { background: linear-gradient( rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0), @@ -1372,6 +1411,50 @@ body > [data-popper-placement] { } } +@keyframes spring-flip-in { + 0% { + transform: rotate(0deg); + } + + 30% { + transform: rotate(-242.4deg); + } + + 60% { + transform: rotate(-158.35deg); + } + + 90% { + transform: rotate(-187.5deg); + } + + 100% { + transform: rotate(-180deg); + } +} + +@keyframes spring-flip-out { + 0% { + transform: rotate(-180deg); + } + + 30% { + transform: rotate(62.4deg); + } + + 60% { + transform: rotate(-21.635deg); + } + + 90% { + transform: rotate(7.5deg); + } + + 100% { + transform: rotate(0deg); + } +} + .status-check-box__status { display: block; box-sizing: border-box; @@ -1428,6 +1511,18 @@ body > [data-popper-placement] { } } +.status__wrapper-direct { + background: mix($ui-base-color, $ui-highlight-color, 95%); + + &:focus { + background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + } + + .status__prepend { + color: $highlight-text-color; + } +} + .status__action-bar { display: flex; align-items: center; @@ -1473,6 +1568,11 @@ body > [data-popper-placement] { height: 24px; margin: -1px 0 0; } + + .status__content__spoiler-link { + line-height: 24px; + margin: -1px 0 0; + } } .media-gallery, @@ -1508,25 +1608,29 @@ body > [data-popper-placement] { padding: 8px 0; // glitch: reduced padding } -.compose-form__textarea-icons { - display: block; - position: absolute; - top: 29px; - inset-inline-end: 5px; - bottom: 5px; - overflow: hidden; +.detailed-status__wrapper-direct { + .detailed-status, + .detailed-status__action-bar { + background: mix($ui-base-color, $ui-highlight-color, 95%); + } - & > .textarea_icon { - display: block; - 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: 0.8; + &:focus { + .detailed-status, + .detailed-status__action-bar { + background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); + } + } + + .detailed-status__action-bar { + border-top-color: mix( + lighten($ui-base-color, 8%), + $ui-highlight-color, + 95% + ); + } + + .status__prepend { + color: $highlight-text-color; } } @@ -4659,10 +4763,10 @@ a.status-card { margin-bottom: 4px; display: block; background-color: rgba($black, 0.45); - text-transform: uppercase; font-size: 11px; - font-weight: 500; - padding: 4px; + text-transform: uppercase; + font-weight: 700; + padding: 2px 6px; border-radius: 4px; opacity: 0.7; @@ -5217,50 +5321,6 @@ a.status-card { } } -@keyframes spring-flip-in { - 0% { - transform: rotate(0deg); - } - - 30% { - transform: rotate(-242.4deg); - } - - 60% { - transform: rotate(-158.35deg); - } - - 90% { - transform: rotate(-187.5deg); - } - - 100% { - transform: rotate(-180deg); - } -} - -@keyframes spring-flip-out { - 0% { - transform: rotate(-180deg); - } - - 30% { - transform: rotate(62.4deg); - } - - 60% { - transform: rotate(-21.635deg); - } - - 90% { - transform: rotate(7.5deg); - } - - 100% { - transform: rotate(0deg); - } -} - .notif-cleaning { .status, .notification { @@ -5268,18 +5328,6 @@ a.status-card { } } -.notification-follow, -.notification-follow-request { - position: relative; - - // same like Status - border-bottom: 1px solid lighten($ui-base-color, 8%); - - .account { - border-bottom: 0 none; - } -} - .language-dropdown { &__dropdown { background: $simple-background-color; @@ -8614,6 +8662,7 @@ noscript { inset-inline-end: 20px; width: 300px; + // glitch: feature to chose which side the pop-in player is displayed &.left { inset-inline-end: unset; inset-inline-start: 20px;