diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 831efb01e9..954a014f3a 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;