usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2025-03-31 16:26:54 +09:00
parent 60f5ae13b2
commit 2ba28e4710
2 changed files with 26 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/frontend/src/components/MkFukidashi.vue
View File

@ -19,15 +19,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<path d="m188.19 87.657c-1.469 2.3218-3.9315 3.8312-6.667 4.0865-2.2309-1.7379-4.9781-2.6816-7.8061-2.6815h-5.1e-4v12.702h12.702v-5.1e-4c2e-5 -1.9998-0.47213-3.9713-1.378-5.754 2.0709-1.6834 3.2732-4.2102 3.273-6.8791-6e-5 -0.49375-0.0413-0.98662-0.1235-1.4735z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".33225" style="paint-order:stroke fill markers"/> <path d="m188.19 87.657c-1.469 2.3218-3.9315 3.8312-6.667 4.0865-2.2309-1.7379-4.9781-2.6816-7.8061-2.6815h-5.1e-4v12.702h12.702v-5.1e-4c2e-5 -1.9998-0.47213-3.9713-1.378-5.754 2.0709-1.6834 3.2732-4.2102 3.273-6.8791-6e-5 -0.49375-0.0413-0.98662-0.1235-1.4735z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".33225" style="paint-order:stroke fill markers"/>
</g> </g>
</svg> </svg>
<div <div :class="$style.content">
:class="[$style.content, { <slot></slot>
[$style.contentBgPanel]: contentBgPanel,
[$style.small]: small,
}]"
>
<div :class="$style.contentInner">
<slot></slot>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -39,15 +32,11 @@ withDefaults(defineProps<{
negativeMargin?: boolean; negativeMargin?: boolean;
shadow?: boolean; shadow?: boolean;
accented?: boolean; accented?: boolean;
contentBgPanel?: boolean;
small?: boolean;
}>(), { }>(), {
tail: 'right', tail: 'right',
negativeMargin: false, negativeMargin: false,
shadow: false, shadow: false,
accented: false, accented: false,
contentBgPanel: false,
small: false,
}); });
</script> </script>
@ -62,7 +51,7 @@ withDefaults(defineProps<{
padding-top: calc(var(--fukidashi-radius) * .13); padding-top: calc(var(--fukidashi-radius) * .13);
&.accented { &.accented {
--fukidashi-bg: var(--MI_THEME-accent); --fukidashi-bg: color-mix(in srgb, var(--MI_THEME-accent), var(--MI_THEME-panel) 85%);
} }
&.shadow { &.shadow {
@ -96,26 +85,12 @@ withDefaults(defineProps<{
.content { .content {
position: relative; position: relative;
padding: 10px 14px; padding: 10px 14px;
&.small {
padding: 6px 10px;
}
&.contentBgPanel::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: var(--MI_THEME-panel);
border-radius: calc(var(--fukidashi-radius) - 2px);
}
} }
.contentInner { @container (max-width: 450px) {
position: relative; .content {
z-index: 1; padding: 8px 12px;
}
} }
.tail { .tail {

23
packages/frontend/src/pages/chat/XMessage.vue
View File

@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div :class="[$style.root, { [$style.isMe]: isMe }]"> <div :class="[$style.root, { [$style.isMe]: isMe }]">
<MkAvatar v-if="!isMe" :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/> <MkAvatar :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
<div :class="$style.body" @contextmenu.stop="onContextmenu"> <div :class="$style.body" @contextmenu.stop="onContextmenu">
<div v-if="!isMe && prefer.s['chat.showSenderName']" :class="$style.header"><MkUserName :user="message.fromUser"/></div> <div v-if="!isMe && prefer.s['chat.showSenderName']" :class="$style.header"><MkUserName :user="message.fromUser"/></div>
<MkFukidashi :tail="isMe ? 'right' : 'left'" :accented="isMe" negativeMargin contentBgPanel small> <MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
<div v-if="!message.isDeleted" :class="$style.content"> <div v-if="!message.isDeleted" :class="$style.content">
<Mfm <Mfm
v-if="message.text" v-if="message.text"
@ -226,8 +226,23 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
position: sticky; position: sticky;
top: calc(16px + var(--MI-stickyTop, 0px)); top: calc(16px + var(--MI-stickyTop, 0px));
display: block; display: block;
width: 32px; width: 50px;
height: 32px; height: 50px;
}
@container (max-width: 450px) {
.root {
&.isMe {
.avatar {
display: none;
}
}
}
.avatar {
width: 42px;
height: 42px;
}
} }
.body { .body {