2
0

_chatbox.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. #conversejs.fullscreen {
  2. .chatbox-btn {
  3. font-size: $font-size-large;
  4. margin: 0 0.3em;
  5. }
  6. .flyout {
  7. border-radius: 0;
  8. border: $flyout-padding solid $chat-head-color;
  9. border-top: 0.8em solid $chat-head-color;
  10. bottom: 0;
  11. }
  12. .chat-head {
  13. font-size: 20px;
  14. padding: 0;
  15. .user-custom-message {
  16. font-size: 50%;
  17. height: auto;
  18. line-height: $line-height;
  19. }
  20. &.chat-head-chatbox {
  21. .close-chatbox-button {
  22. display: none;
  23. }
  24. }
  25. }
  26. .chatbox {
  27. width: 100%;
  28. height: 100%;
  29. margin: 0;
  30. @include make-col-ready();
  31. @include media-breakpoint-up(md) {
  32. @include make-col(9);
  33. }
  34. @include media-breakpoint-up(xl) {
  35. @include make-col(10);
  36. }
  37. .box-flyout {
  38. background-color: $chat-head-color;
  39. height: 100vh;
  40. width: 100%;
  41. box-shadow: none;
  42. }
  43. .chat-body {
  44. background-color: $chat-head-color;
  45. border-top-left-radius: $chatbox-border-radius;
  46. border-top-right-radius: $chatbox-border-radius;
  47. .chat-message {
  48. line-height: $line-height;
  49. font-size: $font-size-small;
  50. padding: 0.4em 0;
  51. .chat-msg-author {
  52. line-height: $line-height;
  53. }
  54. .chat-msg-content {
  55. line-height: $line-height;
  56. .emojione {
  57. height: $line-height;
  58. margin-bottom: -$line-height/4;
  59. }
  60. }
  61. }
  62. }
  63. .chat-content {
  64. padding: 0 $padding $padding $padding;
  65. border-top-left-radius: $chatbox-border-radius;
  66. border-top-right-radius: $chatbox-border-radius;
  67. }
  68. .chat-title {
  69. font-size: $font-size-huge;
  70. line-height: $line-height-huge;
  71. }
  72. .sendXMPPMessage {
  73. ul {
  74. width: 100%;
  75. }
  76. .toggle-smiley {
  77. padding-left: 0.5em;
  78. ul {
  79. &.emoji-toolbar {
  80. .emoji-category-picker {
  81. margin-right: 5em;
  82. }
  83. .emoji-category {
  84. padding-left: 10px;
  85. padding-right: 10px;
  86. }
  87. }
  88. }
  89. }
  90. }
  91. }
  92. }
  93. @media screen and (max-width: 767px) {
  94. #conversejs.fullscreen {
  95. .chatbox {
  96. width: calc(100% - 50px);
  97. }
  98. }
  99. }