fix collapsed notifications incorrect styles
This commit is contained in:
parent
adc47ad38a
commit
d8827932bc
@ -247,7 +247,6 @@
|
|||||||
/>
|
/>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<StatusContent
|
<StatusContent
|
||||||
:class="{ faint: !statusExpanded }"
|
|
||||||
:compact="!statusExpanded"
|
:compact="!statusExpanded"
|
||||||
:status="notification.status"
|
:status="notification.status"
|
||||||
/>
|
/>
|
||||||
|
@ -60,20 +60,6 @@
|
|||||||
padding: 0.6em;
|
padding: 0.6em;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
.RichContent {
|
|
||||||
a {
|
|
||||||
--link: var(--linkFaint);
|
|
||||||
}
|
|
||||||
|
|
||||||
.greentext {
|
|
||||||
--funtextGreentext: var(--funtextGreentextFaint);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cyantext {
|
|
||||||
--funtextCyantext: var(--funtextCyantextFaint);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-container {
|
.avatar-container {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
@ -79,6 +79,12 @@ export default {
|
|||||||
required: false,
|
required: false,
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
// Faint style (for notifs)
|
||||||
|
faint: {
|
||||||
|
required: false,
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// NEVER EVER TOUCH DATA INSIDE RENDER
|
// NEVER EVER TOUCH DATA INSIDE RENDER
|
||||||
@ -277,7 +283,7 @@ export default {
|
|||||||
// DO NOT USE SLOTS they cause a re-render feedback loop here.
|
// DO NOT USE SLOTS they cause a re-render feedback loop here.
|
||||||
// slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
|
// slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
|
||||||
// at least until vue3?
|
// at least until vue3?
|
||||||
const result = <span class="RichContent">
|
const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
|
||||||
{ pass2 }
|
{ pass2 }
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
@ -1,6 +1,15 @@
|
|||||||
.RichContent {
|
.RichContent {
|
||||||
font-family: var(--font);
|
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 {
|
blockquote {
|
||||||
margin: 0.2em 0 0.2em 0.2em;
|
margin: 0.2em 0 0.2em 0.2em;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
@ -11,6 +11,7 @@
|
|||||||
>
|
>
|
||||||
<RichContent
|
<RichContent
|
||||||
class="media-body summary"
|
class="media-body summary"
|
||||||
|
:faint="compact"
|
||||||
:html="status.summary_raw_html"
|
:html="status.summary_raw_html"
|
||||||
:emoji="status.emojis"
|
:emoji="status.emojis"
|
||||||
/>
|
/>
|
||||||
@ -48,6 +49,7 @@
|
|||||||
:html="status.raw_html"
|
:html="status.raw_html"
|
||||||
:emoji="status.emojis"
|
:emoji="status.emojis"
|
||||||
:handle-links="true"
|
:handle-links="true"
|
||||||
|
:faint="compact"
|
||||||
:greentext="mergedConfig.greentext"
|
:greentext="mergedConfig.greentext"
|
||||||
:attentions="status.attentions"
|
:attentions="status.attentions"
|
||||||
@parseReady="onParseReady"
|
@parseReady="onParseReady"
|
||||||
|
@ -62,15 +62,5 @@
|
|||||||
.StatusContent {
|
.StatusContent {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
&.faint {
|
|
||||||
.greentext {
|
|
||||||
color: var(--funtextGreentextFaint);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cyantext {
|
|
||||||
color: var(--funtextCyantextFaint);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user