chatPage.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. // #root {
  2. // max-height: 90vh;
  3. // }
  4. .rootContainer {
  5. min-height: 90vh;
  6. max-width: 95%;
  7. margin: 0 auto;
  8. }
  9. .focus {
  10. position: absolute;
  11. }
  12. .blur {
  13. width: 100%;
  14. }
  15. .rootBox {
  16. display: flex;
  17. height: 90vh;
  18. justify-content: center;
  19. }
  20. .rootMessageForm {
  21. display: flex;
  22. border-radius: 5px;
  23. flex-grow:2;
  24. border: 2px solid grey;
  25. max-width: 75%;
  26. flex-direction: column;
  27. }
  28. .rootMessageFormMobile {
  29. margin: 0 auto;
  30. display: flex;
  31. border-radius: 5px;
  32. flex-grow:1;
  33. max-width: 100%;
  34. border: 2px solid grey;
  35. height: 90vh;
  36. flex-direction: column;
  37. }
  38. .time {
  39. font-style:italic;
  40. color: rgb(80, 80, 80);
  41. font-size: 12px;
  42. margin-left: 30px;
  43. }
  44. .date {
  45. font-style:italic;
  46. color: rgb(80, 80, 80);
  47. font-size: 8px;
  48. }
  49. .textArea {
  50. width: 80%;
  51. resize: none;
  52. border-radius: 4px;
  53. }
  54. .message {
  55. padding: 10px;
  56. margin: 5px 0;
  57. max-width: 80%;
  58. align-self: flex-start;
  59. border-radius: 10px;
  60. background-color: rgb(182, 230, 176);
  61. p {
  62. word-wrap: break-word;
  63. }
  64. // span {
  65. // background-color:azure;
  66. // display: block;
  67. // padding: 5px;
  68. // height: 20px;
  69. // border-radius: 20px;
  70. // text-align: center;
  71. // }
  72. }
  73. .myMessage {
  74. align-self: flex-end;
  75. position: relative;
  76. max-width: 80%;
  77. background-color: rgb(240, 231, 136);
  78. cursor: pointer;
  79. }
  80. .myDate {
  81. align-self: flex-start;
  82. display: flex;
  83. font-style:italic;
  84. color: rgb(80, 80, 80);
  85. font-size: 12px;
  86. }
  87. .date {
  88. display: flex;
  89. align-content:center;
  90. align-self: flex-end;
  91. font-style:italic;
  92. color: rgb(80, 80, 80);
  93. font-size: 12px;
  94. }
  95. // .editMessage{
  96. // background-color: rgb(246, 245, 235);
  97. // transform:translate(-120px, -90px);
  98. // }
  99. .messageBox {
  100. display: flex;
  101. position: relative;
  102. padding: 20px;
  103. border-radius: 10px;
  104. background-color:rgb(243, 243, 243);
  105. display: flex;
  106. flex-grow :2;
  107. flex-direction: column;
  108. overflow: scroll;
  109. }
  110. .usersBox {
  111. align-content: flex-end;
  112. text-align: center;
  113. margin-left: 10px;
  114. width: 20%;
  115. overflow: scroll;
  116. border-radius: 10px;
  117. border: 2px solid grey;
  118. background-color:rgb(30, 45, 52);
  119. .online {
  120. border-radius: 3px;
  121. padding: 5px;
  122. border:2px solid rgb(255, 255, 255);
  123. margin-bottom: 5px;
  124. cursor: pointer;
  125. font-weight: 700;
  126. color:aliceblue;
  127. }
  128. }
  129. .usersBoxMobile {
  130. display: flex;
  131. align-items: center;
  132. padding: 5px;
  133. text-align: center;
  134. overflow: scroll;
  135. font-size: 11px;
  136. border-radius: 10px;
  137. border: 2px solid grey;
  138. background-color:rgb(243, 243, 243);
  139. transition: all 3s ease-in-out;
  140. .online {
  141. border-radius: 5px;
  142. text-overflow: ellipsis;
  143. padding: 5px;
  144. border: 2px solid grey;
  145. margin-bottom: 5px;
  146. background-color:rgb(247, 233, 233);
  147. font-weight: 500;
  148. }
  149. .on {
  150. transform: translateX(100%);
  151. display: none;
  152. }
  153. }