discourse/plugins/chat/assets/stylesheets/common
David Battersby 9335e71f81
FIX: dynamic highlighting of self mentions (#37321)
## Issue

When we open a chat channel we can see that any mentions of our own
username is highlighted, but any new mentions of our username after that
point is not highlighted.

This is due to how user mentions are upserted as part of a background
job when a message is sent, but we return the message bus response
straight away, meaning that we don't have the mentioned user info to
apply the `--current-user` class for styling for self mentions.

## The Solution

This change adds dynamic styling of the current user mentions by adding
the style rules to the page header based on their username. So the
dynamic style will look like:

```js
.mention[href="/u/johndoe"] { background: var(--tertiary-400); }
```

This works for both mentions in posts/topics and chat. Now we no longer
rely on applying a `--current-user` class.

Internal ref - /t/173085
2026-01-28 14:59:48 +04:00
..
base-common.scss UX: moves chat search to its own tab (#36787) 2025-12-19 15:18:34 +01:00
chat-audio-upload.scss FIX: prevents audio container to overflow container (#25012) 2023-12-22 09:38:21 +01:00
chat-browse.scss DEV: Apply latest stylelint autofixes (#36294) 2025-11-27 18:07:22 +01:00
chat-channel-card.scss DEV: Use a css var for the channel card border color (#36052) 2025-11-19 14:22:19 +01:00
chat-channel-filter-bar.scss FEATURE: Add full-text search for chat messages (#34704) 2025-10-22 11:30:35 +02:00
chat-channel-icon.scss DEV: remove chat channel icon (#36690) 2025-12-16 09:37:08 +04:00
chat-channel-info.scss UX: chat > channel info: show member count on tab (#25439) 2024-01-26 12:10:56 +01:00
chat-channel-members.scss UX: Content border color (#33908) 2025-07-28 16:17:06 -05:00
chat-channel-name.scss UX: chat name with emoji alignment (#36217) 2025-11-25 11:37:30 +04:00
chat-channel-preview-card.scss FIX: dont allow channel non-members to write messages in threads (#31697) 2025-03-07 15:50:30 +04:00
chat-channel-row.scss UX: more tweaks to scope chat channel icon (#36654) 2025-12-12 11:36:10 +01:00
chat-channel-settings.scss DEV: Update lint-configs and auto-fix issues (#31485) 2025-02-24 23:32:31 +01:00
chat-channel-title.scss UX: Chat channel icons v2 (#36634) 2025-12-11 16:44:49 +01:00
chat-channel.scss DEV: Update lint-configs and auto-fix issues (#31485) 2025-02-24 23:32:31 +01:00
chat-composer-button.scss DEV: Replace all @breakpoint with @viewport.* (#32649) 2025-05-12 12:52:45 +01:00
chat-composer-dropdown.scss DEV: Introduce stylelint (#29852) 2025-01-20 15:27:42 +00:00
chat-composer-separator.scss Revert "UX: chat composer (#23267)" (#23273) 2023-08-25 13:49:41 -05:00
chat-composer-upload.scss DEV: Update linting (#32836) 2025-05-21 12:02:52 +02:00
chat-composer-uploads.scss UX: align navbar and composer uploads (#24970) 2023-12-19 15:41:51 +01:00
chat-composer.scss UI: slightly reduce padding above chat composer (#35546) 2025-10-23 09:49:18 +02:00
chat-drawer-routes.scss FEATURE: allows browse page in chat drawer (#27919) 2024-07-16 12:34:37 +02:00
chat-drawer.scss UX: moves chat search to its own tab (#36787) 2025-12-19 15:18:34 +01:00
chat-footer.scss UX: moves chat search to its own tab (#36787) 2025-12-19 15:18:34 +01:00
chat-form.scss UX: Content border color (#33908) 2025-07-28 16:17:06 -05:00
chat-height-mixin.scss FIX: iOS26 and composers 2025-11-21 11:48:01 +01:00
chat-index.scss REFACTOR: consolidate empty states, add invite variant (#33455) 2025-07-09 12:34:04 -04:00
chat-mention-warnings.scss DEV: implements <Chat::Navbar /> (#24917) 2023-12-18 17:49:58 +01:00
chat-message-actions.scss DEV: Replace popperjs with floating-ui (#35492) 2025-12-09 01:23:46 +01:00
chat-message-blocks.scss DEV: adds blocks support to chat messages (#29782) 2024-11-19 07:07:58 +01:00
chat-message-collapser.scss
chat-message-creator.scss UX: fix cmd-k bottom padding (#34440) 2025-08-20 16:45:39 +02:00
chat-message-error.scss REFACTOR: <ChatMessage> component (#22172) 2023-06-19 09:50:54 +02:00
chat-message-images.scss DEV: Merge duplicated css (#31167) 2025-02-05 18:42:55 +01:00
chat-message-info.scss UX: tiny polish for the chat thread message info layout on narrow view (#36250) 2025-11-26 12:11:02 +01:00
chat-message-left-gutter.scss
chat-message-search-entry.scss FEATURE: Add full-text search for chat messages (#34704) 2025-10-22 11:30:35 +02:00
chat-message-separator.scss DEV: Add Chat page variables (#33936) 2025-07-29 11:22:50 -05:00
chat-message-text.scss UX: removes blinking indicator while streaming message (#27131) 2024-05-22 13:48:44 +02:00
chat-message-thread-indicator.scss FIX: improves linking of thread messages (#26095) 2024-03-08 09:09:42 +01:00
chat-message.scss FIX: dynamic highlighting of self mentions (#37321) 2026-01-28 14:59:48 +04:00
chat-messages-scroller.scss DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
chat-modal-archive-channel.scss DEV: makes chat modals use the new <DModal /> component (#22495) 2023-07-10 13:43:33 +02:00
chat-modal-channel-summary.scss DEV: makes chat modals use the new <DModal /> component (#22495) 2023-07-10 13:43:33 +02:00
chat-modal-create-channel.scss DEV: Introduce stylelint (#29852) 2025-01-20 15:27:42 +00:00
chat-modal-edit-channel-description.scss DEV: makes chat modals use the new <DModal /> component (#22495) 2023-07-10 13:43:33 +02:00
chat-modal-edit-channel-name.scss FEATURE: chat channel emojis (#36288) 2025-11-28 10:09:08 +04:00
chat-modal-move-message-to-channel.scss DEV: Introduce stylelint (#29852) 2025-01-20 15:27:42 +00:00
chat-modal-new-message.scss UX: fix cmd-k bottom padding (#34440) 2025-08-20 16:45:39 +02:00
chat-navbar.scss UX: show user status in chat channel title (#37080) 2026-01-13 13:08:43 +04:00
chat-notices.scss UX: add radius to chat notices + alignment for dismiss btn (#36527) 2025-12-08 12:04:48 +01:00
chat-onebox.scss FIX: Allow oneboxes with no description (#31518) 2025-02-26 13:16:51 +10:00
chat-reply.scss DEV: Merge duplicated css (#31167) 2025-02-05 18:42:55 +01:00
chat-replying-indicator.scss DEV: replace zero width space character in chat typing indicator (#31675) 2025-03-06 15:53:50 -05:00
chat-scroll-to-bottom.scss FIX: removes shift which is not necessary anymore (#32979) 2025-05-28 20:07:05 +02:00
chat-search.scss FEATURE: Add full-text search for chat messages (#34704) 2025-10-22 11:30:35 +02:00
chat-section.scss UX: Content border color (#33908) 2025-07-28 16:17:06 -05:00
chat-selection-manager.scss UX: Content border color (#33908) 2025-07-28 16:17:06 -05:00
chat-side-panel-resizer.scss FIX: do not store 0 has min width for thead panel (#30818) 2025-01-16 16:03:35 +01:00
chat-sidebar.scss FEATURE: Hover menu for all chat channels in sidebar (#34727) 2026-01-05 10:59:00 +10:00
chat-skeleton.scss DEV: Update linting (#32836) 2025-05-21 12:02:52 +02:00
chat-thread-header.scss UX: Content border color (#33908) 2025-07-28 16:17:06 -05:00
chat-thread-heading.scss FIX: word break long continuous thread titles (#30007) 2024-11-30 01:07:39 +01:00
chat-thread-list-header.scss UX: Content border color (#33908) 2025-07-28 16:17:06 -05:00
chat-thread-list-item.scss UX: Content border color (#33908) 2025-07-28 16:17:06 -05:00
chat-thread-participants.scss DEV: Introduce stylelint (#29852) 2025-01-20 15:27:42 +00:00
chat-thread-title.scss UX: allow users to click thread title to open it (#24816) 2023-12-11 13:54:00 +01:00
chat-thread-unread-indicator.scss DEV: Fix mixed-decls sass deprecations in plugins (#31356) 2025-02-18 20:04:51 +01:00
chat-thread.scss DEV: Update lint-configs and auto-fix issues (#31485) 2025-02-24 23:32:31 +01:00
chat-threads-list.scss DEV: Update lint-configs and auto-fix issues (#31485) 2025-02-24 23:32:31 +01:00
chat-transcript.scss UX: Content border color (#33908) 2025-07-28 16:17:06 -05:00
chat-unread-indicator.scss UX: Show chat indicator on mobile (#35973) 2025-11-12 08:54:22 -06:00
chat-upload-drop-zone.scss DEV: Update linting (#32836) 2025-05-21 12:02:52 +02:00
chat-user-avatar.scss DEV: Update lint-configs and autofix issues (#31620) 2025-03-05 01:20:16 +01:00
chat-user-threads.scss UX: wrap chat thread title to nearest word (#36698) 2025-12-15 23:50:09 +04:00
core-extensions.scss UX: tighten unread badge spacing in sidebar (#37097) 2026-01-14 15:31:00 +04:00
direct-message-creator.scss UX: Content border color (#33908) 2025-07-28 16:17:06 -05:00
incoming-chat-webhooks.scss DEV: Introduce stylelint (#29852) 2025-01-20 15:27:42 +00:00
index.scss FEATURE: Hover menu for all chat channels in sidebar (#34727) 2026-01-05 10:59:00 +10:00
reviewable-chat-message.scss