Further reduce differences with upstream (mainly private mention styling) (#2641)

* Use upstream's CSS for private mentions styling

* Further reduce differences with upstream
main-rebase-security-fix
Claire 2024-02-22 18:45:54 +01:00 committed by GitHub
parent 604c93332f
commit fff378177e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 144 additions and 95 deletions

View File

@ -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;