_chatbox.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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. padding: 0.3em;
  25. line-height: $line-height-large;
  26. .chat-msg-author {
  27. line-height: $line-height-large;
  28. }
  29. .chat-msg-content {
  30. line-height: $line-height-large;
  31. .emojione {
  32. margin-bottom: -5px;
  33. }
  34. }
  35. }
  36. }
  37. }
  38. .chatbox {
  39. form.sendXMPPMessage {
  40. .chat-toolbar {
  41. li {
  42. .toolbar-menu {
  43. min-width: 235px;
  44. ul {
  45. &.emoji-toolbar {
  46. width: 100%;
  47. .emoji-category {
  48. float: left;
  49. }
  50. }
  51. }
  52. }
  53. }
  54. }
  55. }
  56. }
  57. }
  58. @include media-breakpoint-down(sm) {
  59. #conversejs:not(.fullscreen) {
  60. > .row {
  61. flex-direction: column;
  62. &.no-gutters {
  63. margin: -1em;
  64. }
  65. }
  66. }
  67. }