Advertisement
YorKnEz

Untitled

Apr 6th, 2021
44
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.43 KB | None | 0 0
  1. .chat-container {
  2. background-color: #343a40;
  3. padding-top: 56px;
  4. display: flex;
  5. height: 100vh;
  6. }
  7.  
  8. .chatroom-container {
  9. display: flex;
  10. flex: 1;
  11. flex-direction: column;
  12. }
  13.  
  14. .chatroom-header {
  15. background-color: #343a40;
  16. padding: 8px;
  17. display: flex;
  18. align-items: center;
  19. border-top: 1px solid gray;
  20. border-bottom: 1px solid gray;
  21. }
  22.  
  23. .chatroom-header-title {
  24. padding: 5px 10px;
  25. color: white;
  26. }
  27.  
  28. .message-list {
  29. background-color: #343a40;
  30. height: calc(100vh - 114px);
  31. padding: 10px;
  32. display: flex;
  33. flex-direction: column-reverse;
  34. overflow: scroll;
  35. position: relative;
  36. }
  37. .message-list::-webkit-scrollbar-track {
  38. background: #343a40;
  39. }
  40. .message-list::-webkit-scrollbar-thumb {
  41. background: #888;
  42. }
  43.  
  44. .message {
  45. position: relative;
  46. padding: 6px 10px;
  47. border-radius: 8px;
  48. margin-bottom: 5px;
  49. color: white;
  50. box-shadow: 0px 0px 8px #22262a;
  51.  
  52. word-break: break-all;
  53. overflow-wrap: break-word;
  54. hyphens: auto;
  55. line-break: anywhere;
  56. max-width: 40vw;
  57. }
  58. .message-image {
  59. width: '300px';
  60. height: 'auto';
  61. }
  62. .message-received {
  63. background: linear-gradient(to bottom, #73808c, #5c6670);
  64. border-top-left-radius: 0px;
  65. }
  66. .message-sent {
  67. background: linear-gradient(to bottom, #20b2aa, #1b9891);
  68. border-top-right-radius: 0px;
  69. }
  70.  
  71. .send-box {
  72. padding: 10px;
  73. display: flex;
  74. }
  75.  
  76. .send-box .message-input {
  77. border-radius: 20px;
  78. background: linear-gradient(to bottom, #fff, #ddd);
  79. box-shadow: 0px 0px 12px #22262a;
  80. margin-right: 8px;
  81. margin-left: 8px;
  82. }
  83.  
  84. .button {
  85. background: linear-gradient(to bottom, #20b2aa, #1b9891);
  86. border: none;
  87. border-radius: 20px;
  88. width: 38px;
  89. height: 38px;
  90. box-shadow: 0px 0px 12px #22262a;
  91. }
  92.  
  93. .dropdown-toggle {
  94. background-color: transparent;
  95. border: none;
  96. }
  97. .dropdown-toggle:hover,
  98. .dropdown-toggle:focus,
  99. .dropdown-toggle:active {
  100. background-color: transparent !important;
  101. border: none !important;
  102. outline: none !important;
  103. box-shadow: none !important;
  104. }
  105. .dropdown-toggle:after {
  106. display: none;
  107. }
  108.  
  109. .dropdown-menu {
  110. background-color: transparent;
  111. border: none;
  112. transition: all 0.5s ease;
  113. }
  114.  
  115. .dropdown-item {
  116. padding: 0.33rem 0px;
  117. text-align: left;
  118. }
  119. .dropdown-item:hover {
  120. background-color: transparent;
  121. }
  122. .dropdown-item:focus {
  123. background-color: transparent;
  124. }
  125.  
  126. .poza {
  127. width: 100px !important;
  128. height: 100px !important;
  129. }
  130.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement