mirror of https://github.com/Siphonay/mastodon
Further reduce differences with upstream (mainly private mention styling) (#2641)
* Use upstream's CSS for private mentions styling * Further reduce differences with upstream
This commit is contained in:
Claire
GitHub
parent
604c93332f
commit
fff378177e
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue