_chatbox.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. #converse-embedded-chat,
  2. #conversejs:not(.fullscreen) {
  3. .chat-head {
  4. border-top-left-radius: $chatbox-border-radius;
  5. border-top-right-radius: $chatbox-border-radius;
  6. @media screen and (max-height: $mobile-landscape-height) {
  7. border-top-left-radius: 0;
  8. border-top-right-radius: 0;
  9. }
  10. @media screen and (max-width: $mobile-portrait-length) {
  11. border-top-left-radius: 0;
  12. border-top-right-radius: 0;
  13. }
  14. }
  15. .chatbox {
  16. min-width: $chat-width!important;
  17. width: $chat-width;
  18. .box-flyout {
  19. min-width: $chat-width!important;
  20. width: $chat-width;
  21. }
  22. .chat-body {
  23. .chat-message {
  24. line-height: $line-height-large;
  25. .chat-msg-author {
  26. line-height: $line-height-large;
  27. }
  28. .chat-msg-content {
  29. line-height: $line-height-large;
  30. .emojione {
  31. margin-bottom: -5px;
  32. }
  33. }
  34. }
  35. }
  36. }
  37. .chatbox {
  38. form.sendXMPPMessage {
  39. .chat-toolbar {
  40. li {
  41. .toolbar-menu {
  42. min-width: 235px;
  43. ul {
  44. &.emoji-toolbar {
  45. width: 100%;
  46. .emoji-category {
  47. float: left;
  48. }
  49. }
  50. }
  51. }
  52. }
  53. }
  54. }
  55. }
  56. }
  57. @include media-breakpoint-down(sm) {
  58. #conversejs:not(.converse-fullscreen):not(.converse-embedded) {
  59. > .row {
  60. flex-direction: column;
  61. &.no-gutters {
  62. margin: -1em;
  63. }
  64. }
  65. }
  66. }