chat-with-mentions.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <div class="chat">
  2. <ul class="chat__posts">
  3. <li>
  4. <img src="../../assets/img/m_1.jpg" alt="avatar" class="photo">
  5. <div class="chat__posts__post__message">
  6. <strong>Charles Flores</strong>
  7. <a class="chat__posts__post__mailto-user" href="mailto:cflores@example.com">@cflores</a>
  8. <span class="chat__posts__post__time">2 hours ago</span>
  9. <p class="chat__posts__post__content">
  10. Thanks for another <a class="mention" data-mention="#yummy" href="https://example.com/social/yummy">#yummy</a> recipe,
  11. <a class="mention" data-mention="@dwilliams" href="mailto:dwilliams@example.com">@dwilliams</a>!
  12. Makes me <a class="mention" data-mention="#hungry" href="https://example.com/social/hungry">#hungry</a>
  13. just looking at the photos 😋. Definitely adding it to my TODO list for our next
  14. <a class="mention" data-mention="#mediterranean" href="https://example.com/social/mediterranean">#mediterranean</a> potluck.
  15. </p>
  16. </div>
  17. </li>
  18. <li>
  19. <img src="../../assets/img/w_1.jpg" alt="avatar" class="photo">
  20. <div class="chat__posts__post__message">
  21. <strong>Mildred Wilson</strong>
  22. <a class="chat__posts__post__mailto-user" href="mailto:mwilson@example.com">@mwilson</a>
  23. <span class="chat__posts__post__time">4 hours ago</span>
  24. <p class="chat__posts__post__content">
  25. Really appreciate the <a class="mention" data-mention="#vegetarian" href="https://example.com/social/vegetarian">#vegetarian</a>
  26. and <a class="mention" data-mention="#vegan" href="https://example.com/social/vegan">#vegan</a> variations of your recipes.
  27. So thoughtful of you! 🌱
  28. </p>
  29. </div>
  30. </li>
  31. </ul>
  32. <div class="chat__editor">
  33. <p>
  34. I agree with <a href="mailto:mwilson@example.com" class="mention" data-mention="@mwilson">@mwilson</a> 👍.
  35. It’s so nice of you to always be providing a few options to try! I love
  36. <a href="https://example.com/social/greek" class="mention" data-mention="#greek">#greek</a> cuisine with a modern twist,
  37. this one will be perfect to try.
  38. </p>
  39. </div>
  40. <button class="chat-send" type="button">Send</button>
  41. </div>
  42. <style>
  43. /* ---- General layout ---------------------------------------------------------------------- */
  44. .chat {
  45. margin-bottom: 1em
  46. }
  47. /* ---- Chat posts -------------------------------------------------------------------------- */
  48. .chat ul.chat__posts {
  49. border: 1px solid var(--ck-color-base-border);
  50. border-top-left-radius: var(--ck-border-radius);
  51. border-top-right-radius: var(--ck-border-radius);
  52. border-bottom: none;
  53. margin: 1em 0 0;
  54. padding: 1em;
  55. list-style-position: inside;
  56. }
  57. .chat ul.chat__posts li {
  58. display: flex;
  59. }
  60. .chat ul.chat__posts li.new-post {
  61. /* Highlight a new post in the chat. */
  62. animation: highlight 600ms ease-out;
  63. }
  64. .chat ul.chat__posts li + li {
  65. margin-top: 1em;
  66. }
  67. .chat .chat__posts li .photo {
  68. border-radius: 100%;
  69. height: 40px;
  70. margin-right: 1.5em;
  71. }
  72. .chat .chat__posts li .time {
  73. color: hsl(0, 0%, 72%);
  74. font-size: .9em;
  75. }
  76. .chat .chat__posts .chat__posts__post__message > strong::after,
  77. .chat__posts__post__mailto-user::after {
  78. content: "•";
  79. padding-left: 5px;
  80. padding-right: 5px;
  81. color: hsl(0, 0%, 72%);
  82. }
  83. @keyframes highlight {
  84. 0% {
  85. background-color: yellow;
  86. }
  87. 100% {
  88. background-color: white;
  89. }
  90. }
  91. /* ---- Chat editor ------------------------------------------------------------------------- */
  92. .chat .chat__editor {
  93. /* Anti–FOUC (flash of unstyled content). */
  94. padding: 1em;
  95. border: 1px solid var(--ck-color-base-border);
  96. }
  97. .chat .chat__editor + .ck.ck-editor {
  98. margin-top: 0;
  99. }
  100. .chat .chat__editor + .ck.ck-editor .ck.ck-toolbar {
  101. border-top-left-radius: 0;
  102. border-top-right-radius: 0;
  103. }
  104. /* ---- In–editor mention list --------------------------------------------------------------- */
  105. .ck-mentions .mention__item {
  106. display: block;
  107. }
  108. .ck-mentions .mention__item img {
  109. border-radius: 100%;
  110. height: 30px;
  111. }
  112. .ck-mentions .mention__item span {
  113. margin-left: .5em;
  114. }
  115. .ck-mentions .mention__item.ck-on span {
  116. color: var(--ck-color-base-background);
  117. }
  118. .ck-mentions .mention__item .mention__item__full-name {
  119. color: hsl(0, 0%, 45%);
  120. }
  121. .ck-mentions .mention__item:hover:not(.ck-on) .mention__item__full-name {
  122. color: hsl(0, 0%, 40%);
  123. }
  124. /* ---- Chat editor content styles ----------------------------------------------------------- */
  125. .chat .ck-content .mention {
  126. background: unset;
  127. }
  128. .chat .ck.ck-content a,
  129. .chat .chat__posts a {
  130. color: hsl(231, 89%, 53%);
  131. }
  132. </style>