sass/root-org
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: add missing chat CSS (twemoji sizing, emoji-only, mentions, message highlight)

Browse Source
This commit is contained in:
AlacrisDevs
2026-02-07 01:53:06 +02:00
parent a8d79cf138
commit be99a02e78
1 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/routes/layout.css
View File

@@ -102,4 +102,68 @@
.prose h1, .prose h2, .prose h3, .prose h4 { @apply text-light font-heading; margin: 0.75em 0 0.5em; } .prose h1, .prose h2, .prose h3, .prose h4 { @apply text-light font-heading; margin: 0.75em 0 0.5em; }
.prose a { @apply text-primary underline; } .prose a { @apply text-primary underline; }
.prose hr { @apply border-t border-dark my-4; } .prose hr { @apply border-t border-dark my-4; }
.prose img { @apply max-w-full rounded-sm; }
.prose table { @apply w-full border-collapse my-2; }
.prose th, .prose td { @apply border border-dark p-2 text-left; }
.prose th { @apply bg-night font-semibold; }
}
/* Chat: Inline Twemoji sizing */
.twemoji-inline {
display: inline-block;
width: 1.2em;
height: 1.2em;
vertical-align: -0.2em;
margin: 0 0.05em;
}
/* Chat: Emoji-only messages show larger emojis */
.emoji-only .twemoji-inline {
width: 2.8em;
height: 2.8em;
vertical-align: -0.3em;
margin: 0 0.075em;
}
.twemoji {
display: inline-block;
vertical-align: -0.1em;
}
/* Chat: Mention styles */
.mention-ping {
background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
color: var(--color-primary);
padding: 0 0.25em;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
font-size: inherit;
font-family: inherit;
border: none;
transition: background-color 150ms ease;
}
.mention-ping:hover {
background-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
text-decoration: underline;
}
.mention-everyone {
background-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
color: var(--color-warning);
}
.mention-everyone:hover {
background-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}
/* Chat: Message highlight animation for reply scroll */
@keyframes message-highlight {
0%, 100% { background-color: transparent; }
50% { background-color: rgba(0, 163, 224, 0.2); }
}
.message-highlight {
animation: message-highlight 1s ease-in-out 2;
} }