fix collapsed notifications incorrect styles

This commit is contained in:
Henry Jameson 2024-02-27 01:08:04 +02:00
parent adc47ad38a
commit d8827932bc
6 changed files with 18 additions and 26 deletions

View File

@ -247,7 +247,6 @@
/>
<template v-else>
<StatusContent
:class="{ faint: !statusExpanded }"
:compact="!statusExpanded"
:status="notification.status"
/>

View File

@ -60,20 +60,6 @@
padding: 0.6em;
min-width: 0;
.RichContent {
a {
--link: var(--linkFaint);
}
.greentext {
--funtextGreentext: var(--funtextGreentextFaint);
}
.cyantext {
--funtextCyantext: var(--funtextCyantextFaint);
}
}
.avatar-container {
width: 32px;
height: 32px;

View File

@ -79,6 +79,12 @@ export default {
required: false,
type: Boolean,
default: false
},
// Faint style (for notifs)
faint: {
required: false,
type: Boolean,
default: false
}
},
// NEVER EVER TOUCH DATA INSIDE RENDER
@ -277,7 +283,7 @@ export default {
// DO NOT USE SLOTS they cause a re-render feedback loop here.
// slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
// at least until vue3?
const result = <span class="RichContent">
const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
{ pass2 }
</span>

View File

@ -1,6 +1,15 @@
.RichContent {
font-family: var(--font);
&.-faint {
/* stylelint-disable declaration-no-important */
--text: var(--textFaint) !important;
--link: var(--linkFaint) !important;
--funtextGreentext: var(--funtextGreentextFaint) !important;
--funtextCyantext: var(--funtextCyantextFaint) !important;
/* stylelint-enable declaration-no-important */
}
blockquote {
margin: 0.2em 0 0.2em 0.2em;
font-style: italic;

View File

@ -11,6 +11,7 @@
>
<RichContent
class="media-body summary"
:faint="compact"
:html="status.summary_raw_html"
:emoji="status.emojis"
/>
@ -48,6 +49,7 @@
:html="status.raw_html"
:emoji="status.emojis"
:handle-links="true"
:faint="compact"
:greentext="mergedConfig.greentext"
:attentions="status.attentions"
@parseReady="onParseReady"

View File

@ -62,15 +62,5 @@
.StatusContent {
flex: 1;
min-width: 0;
&.faint {
.greentext {
color: var(--funtextGreentextFaint);
}
.cyantext {
color: var(--funtextCyantextFaint);
}
}
}
</style>