chatPage.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. .rootContainer {
  2. max-width: 90%;
  3. margin: 0 auto;
  4. }
  5. .message {
  6. padding: 10px;
  7. margin: 5px;
  8. max-width: 50%;
  9. border-radius: 10px;
  10. background-color: rgb(182, 230, 176);
  11. p {
  12. word-wrap: break-word;
  13. }
  14. span {
  15. background-color:azure;
  16. display: block;
  17. padding: 5px;
  18. height: 20px;
  19. border-radius: 20px;
  20. text-align: center;
  21. }
  22. }
  23. .myMessage {
  24. align-self: flex-end;
  25. background-color: rgb(240, 231, 136);
  26. cursor: pointer;
  27. }
  28. .editMessage{
  29. // background-color: rgb(246, 245, 235);
  30. // transform:translate(-120px, -90px);
  31. }
  32. .messageBox {
  33. display: flex;
  34. padding: 20px;
  35. border-radius: 10px;
  36. background-color:rgb(243, 243, 243);
  37. display: flex;
  38. flex-grow :2;
  39. flex-direction: column;
  40. overflow: scroll;
  41. height: 100vh
  42. }
  43. .usersBox {
  44. align-content: flex-end;
  45. text-align: center;
  46. padding: 20px;
  47. margin-left: 10px;
  48. width: 20%;
  49. border-radius: 10px;
  50. background-color:rgb(243, 243, 243);
  51. .online {
  52. border-radius: 5px;
  53. padding: 5px;
  54. margin-bottom: 5px;
  55. background-color:rgb(247, 233, 233);
  56. font-weight: 700;
  57. }
  58. }