Carbon/src/sass/components/messages.sass

@use "../colors" as c

.c-event-groups > *
  overflow-anchor: none

.c-message-group, .c-message-event
  margin-top: 12px
  padding-top: 12px
  border-top: 1px solid c.$divider

.c-message-group
  display: grid
  grid-template-columns: auto 1fr

  &__avatar
    flex-shrink: 0
    margin-right: 16px
    cursor: pointer

  &__icon
    $size: 40px
    width: $size
    height: $size
    border-radius: 50%

    &--no-icon
      background-color: #bbb

  &__intro
    display: flex
    align-items: baseline

  &__name
    color: #5bf
    margin: -2px 0px -3px
    font-size: 19px
    font-weight: 500
    cursor: pointer

    &:hover
      text-decoration: underline

  &__date
    font-size: 14px
    margin-left: 9px
    color: c.$muted

.c-message
  margin-top: 4px
  overflow-wrap: anywhere
  opacity: 1
  transition: opacity 0.2s ease-out

  &--plain
    white-space: pre-wrap

  &--media
    // fix whitespace
    font-size: 0
    margin-top: 8px

  &--pending
    opacity: 0.5

  &__edited
    margin-left: 4px
    padding: 1px 3px 1px 2px
    font-size: 12px
    font-style: italic
    line-height: 1
    color: c.$muted
    cursor: default
    border-radius: 4px
    transition: background-color 0.15s ease-out

    &:hover
      background-color: c.$darker

  &__image
    width: auto
    height: auto
    max-width: 400px
    max-height: 300px

  // message formatting rules

  code, pre
    border-radius: 4px
    font-size: 0.9em

  pre
    background-color: c.$darkest
    padding: 8px
    border: 1px solid c.$divider
    white-space: pre-wrap

  code
    background-color: c.$darker
    padding: 2px 4px

  a
    color: c.$link

  blockquote
    margin-left: 8px
    border-left: 4px solid c.$muted
    padding: 2px 0px 2px 12px

  p, pre, blockquote
    margin: 16px 0px

    &:first-child
      margin-top: 0px

    &:last-child
      margin-bottom: 0px

.c-message-event
  padding-top: 10px
  padding-left: 6px

  &__inner
    display: flex
    align-items: center

  &__icon
    margin-right: 8px
    position: relative
    top: 1px

.c-message-notice
  padding: 12px

  &__inner
    text-align: center
    padding: 12px
    background-color: c.$milder
    border-radius: 8px
Add messages, chat, and room list animation 2020-10-12 11:19:10 +00:00			`@use "../colors" as c`

Fix purify and highlight - purify: apply target=_blank to links - purify: remove ALLOWED_URI_REGEXP - this breaks external links in anchor elements - purify: return a DOM fragment instead of a string - postprocess: only highlight pre - postprocess: remove nested code inside pre - better style messages with css 2020-11-05 04:32:36 +00:00			`.c-event-groups > *`
Better event grouping code 2020-10-19 05:37:17 +00:00			`overflow-anchor: none`

Add interactive rooms, icons, events, dates 2020-10-12 12:35:54 +00:00			`.c-message-group, .c-message-event`
Add messages, chat, and room list animation 2020-10-12 11:19:10 +00:00			`margin-top: 12px`
			`padding-top: 12px`
			`border-top: 1px solid c.$divider`

Add interactive rooms, icons, events, dates 2020-10-12 12:35:54 +00:00			`.c-message-group`
Fix fullwidth layout 2020-11-07 12:11:31 +00:00			`display: grid`
			`grid-template-columns: auto 1fr`
Add interactive rooms, icons, events, dates 2020-10-12 12:35:54 +00:00
Add messages, chat, and room list animation 2020-10-12 11:19:10 +00:00			`&__avatar`
			`flex-shrink: 0`
			`margin-right: 16px`
Add interactive rooms, icons, events, dates 2020-10-12 12:35:54 +00:00			`cursor: pointer`
Add messages, chat, and room list animation 2020-10-12 11:19:10 +00:00
			`&__icon`
Larger user avatars, fix avatar background 2020-10-20 00:37:23 +00:00			`$size: 40px`
Add messages, chat, and room list animation 2020-10-12 11:19:10 +00:00			`width: $size`
			`height: $size`
			`border-radius: 50%`
Larger user avatars, fix avatar background 2020-10-20 00:37:23 +00:00
			`&--no-icon`
Improve message sender rendering - Refactor sender class into parts - Sender name colour depends on mxid, like Element - (colours slightly modified for contrast) - Display blank avatar if loading fails - Remove # parts from mxc - Don't replace member state if loaded state is older 2020-10-29 04:28:12 +00:00			`background-color: #bbb`
Add messages, chat, and room list animation 2020-10-12 11:19:10 +00:00
Add interactive rooms, icons, events, dates 2020-10-12 12:35:54 +00:00			`&__intro`
			`display: flex`
			`align-items: baseline`

Add messages, chat, and room list animation 2020-10-12 11:19:10 +00:00			`&__name`
			`color: #5bf`
			`margin: -2px 0px -3px`
			`font-size: 19px`
			`font-weight: 500`
Add interactive rooms, icons, events, dates 2020-10-12 12:35:54 +00:00			`cursor: pointer`

			`&:hover`
			`text-decoration: underline`

			`&__date`
			`font-size: 14px`
			`margin-left: 9px`
			`color: c.$muted`
Add messages, chat, and room list animation 2020-10-12 11:19:10 +00:00
			`.c-message`
			`margin-top: 4px`
Better message line breaking 2020-10-26 10:56:40 +00:00			`overflow-wrap: anywhere`
Display ghost messages that are being sent 2020-10-19 11:23:10 +00:00			`opacity: 1`
			`transition: opacity 0.2s ease-out`
Render image messages 2020-11-07 12:04:42 +00:00
			`&--plain`
			`white-space: pre-wrap`

			`&--media`
			`// fix whitespace`
			`font-size: 0`
			`margin-top: 8px`
Display ghost messages that are being sent 2020-10-19 11:23:10 +00:00
			`&--pending`
			`opacity: 0.5`
Add interactive rooms, icons, events, dates 2020-10-12 12:35:54 +00:00
Support edits 2020-10-20 12:53:37 +00:00			`&__edited`
			`margin-left: 4px`
			`padding: 1px 3px 1px 2px`
			`font-size: 12px`
			`font-style: italic`
			`line-height: 1`
			`color: c.$muted`
			`cursor: default`
			`border-radius: 4px`
			`transition: background-color 0.15s ease-out`

			`&:hover`
			`background-color: c.$darker`

Render image messages 2020-11-07 12:04:42 +00:00			`&__image`
			`width: auto`
			`height: auto`
			`max-width: 400px`
			`max-height: 300px`

Fix purify and highlight - purify: apply target=_blank to links - purify: remove ALLOWED_URI_REGEXP - this breaks external links in anchor elements - purify: return a DOM fragment instead of a string - postprocess: only highlight pre - postprocess: remove nested code inside pre - better style messages with css 2020-11-05 04:32:36 +00:00			`// message formatting rules`

			`code, pre`
			`border-radius: 4px`
			`font-size: 0.9em`

			`pre`
			`background-color: c.$darkest`
			`padding: 8px`
			`border: 1px solid c.$divider`
Send own typing status 2020-11-08 12:11:28 +00:00			`white-space: pre-wrap`
Fix purify and highlight - purify: apply target=_blank to links - purify: remove ALLOWED_URI_REGEXP - this breaks external links in anchor elements - purify: return a DOM fragment instead of a string - postprocess: only highlight pre - postprocess: remove nested code inside pre - better style messages with css 2020-11-05 04:32:36 +00:00
			`code`
			`background-color: c.$darker`
			`padding: 2px 4px`

			`a`
			`color: c.$link`

Style blockquotes 2020-11-07 11:11:32 +00:00			`blockquote`
			`margin-left: 8px`
			`border-left: 4px solid c.$muted`
			`padding: 2px 0px 2px 12px`

			`p, pre, blockquote`
Fix purify and highlight - purify: apply target=_blank to links - purify: remove ALLOWED_URI_REGEXP - this breaks external links in anchor elements - purify: return a DOM fragment instead of a string - postprocess: only highlight pre - postprocess: remove nested code inside pre - better style messages with css 2020-11-05 04:32:36 +00:00			`margin: 16px 0px`

			`&:first-child`
			`margin-top: 0px`

			`&:last-child`
			`margin-bottom: 0px`

Add interactive rooms, icons, events, dates 2020-10-12 12:35:54 +00:00			`.c-message-event`
			`padding-top: 10px`
			`padding-left: 6px`

			`&__inner`
			`display: flex`
			`align-items: center`

			`&__icon`
			`margin-right: 8px`
			`position: relative`
			`top: 1px`

			`.c-message-notice`
			`padding: 12px`

			`&__inner`
			`text-align: center`
			`padding: 12px`
			`background-color: c.$milder`
			`border-radius: 8px`