_muc_embedded.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. @import "bourbon";
  2. @import "converse/variables";
  3. #conversejs.converse-embedded {
  4. @include box-sizing(border-box);
  5. *, *:before, *:after {
  6. @include box-sizing(border-box);
  7. }
  8. bottom: auto;
  9. right: auto;
  10. position: relative;
  11. width: 100%;
  12. form {
  13. &.converse-centered-form {
  14. position: absolute;
  15. top: 30%;
  16. transform: translateY(-50%);
  17. }
  18. }
  19. .chatroom {
  20. width: auto;
  21. }
  22. .flyout {
  23. bottom: auto;
  24. display: block;
  25. position: relative;
  26. }
  27. .chatbox {
  28. float: none;
  29. .box-flyout {
  30. box-shadow: none;
  31. }
  32. .chat-title {
  33. padding: 0.3em;
  34. font-size: 120%;
  35. }
  36. }
  37. .chatbox-btn {
  38. display: none;
  39. }
  40. .chatroom {
  41. .box-flyout {
  42. min-width: auto;
  43. width: 100%;
  44. height: 55vh;
  45. .chat-body {
  46. @include calc(height, '100% - #{$chat-head-height}');
  47. }
  48. .occupants-heading {
  49. font-size: 120%;
  50. }
  51. .chat-content {
  52. .chat-message {
  53. margin: 0.5em;
  54. font-size: 120%;
  55. }
  56. }
  57. .sendXMPPMessage {
  58. .chat-textarea {
  59. padding: 0.5em;
  60. font-size: 110%;
  61. }
  62. }
  63. .chatroom-body {
  64. .chatroom-form-container {
  65. font-size: 180%;
  66. float: left;
  67. height: 100%;
  68. position: relative;
  69. input {
  70. font-size: 60%;
  71. }
  72. }
  73. }
  74. .occupants {
  75. .occupant-list {
  76. padding-left: 0.3em;
  77. li.occupant {
  78. font-size: 120%;
  79. }
  80. }
  81. }
  82. }
  83. }
  84. }